Lets add a favicon to our application using the connect.favicon middleware. From a performance perspective, this has some value as we can cache it. Also, your browser will request a favicon even if one does not exist, and this can result in 404 errors being thrown. We will use the existing staticCache config value to set maxAge for the favicon. Let's edit the Express server, /vision-web/lib/express/index.js, and add the favicon middleware:
app.set('views', 'views'),
app.use(express.favicon('public/components/vision/favicon.ico'), { maxAge: config.get('express:staticCache') });We can improve page load time by minifying our static assets. We will minify our JavaScript and CSS files by installing the following two grunt tasks:
grunt-contrib-uglify: This allows you to minify JavaScript files:
npm install grunt-contrib-uglify --save-dev
grunt-contrib-cssmin: This allows you to minify CSS files:
npm install grunt-contrib-cssmin --save-dev
Let's add these minification tasks to our grunt file, as follows:
grunt.loadNpmTasks('grunt-contrib-uglify'),
grunt.loadNpmTasks('grunt-contrib-cssmin'),
uglify: {
dist: {
files: {
'public/components/vision/templates.min.js':
'public/components/vision/templates.js',
'public/components/vision/vision.min.js':
'public/components/vision/vision.js',
'public/components/json2/json2.min.js':
'public/components/json2/json2.js',
'public/components/handlebars/handlebars.runtime.min.js':
'public/components/handlebars/handlebars.runtime.js'
}
}
},
cssmin: {
minify: {
expand: true,
src: ['public/components/vision/vision.css'],
ext: '.min.css'
}
}Let's run the following commands:
grunt uglify grunt cssmin
Not all of our JavaScript components have a minified version, so we minify these as well, adding a .min version for json2 and handlebars.