本系列文章可以在这里查看：性能优化系列

静态管理可以从多方面进行优化，是前端性能优化的重点！本系列中的分享均是本人实际在项目开发中用到的。

第一步

  • 资源合并grunt-contrib-concat、grunt-contrib-cssmin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 任务：合并js文件
concat: {
    // 目标1：合并js文件all.js
    all_js: {
        src: ['a.js', 'b.js'],
        dest: 'all.js'
    },
    app_js: {
        src: ['core.js', 'main.js'],
        dest: 'app.js'
    }
},
// 任务：合并css文件
cssmin: {
    combine: {
        files: {
            'all.css': ['form.css', 'reset.css', 'main.css']
        }
    }
}
  • 静态资源压缩grunt-contrib-uglify、grunt-contrib-cssmin
// 任务：js文件压缩
uglify: {
    min_js: {
        files: {
            'app.min.js': ['all.js', 'app.js']
        }
    }
}
// 任务：css文件压缩
cssmin: {
    css_min: {
        files: [{
            expand: true,
            cwd: '/path/to/yourdir', // 源目录
            src: ['*.css', '!*.min.css'],
            dest: '/path/to/yourdir/', // 目标目录
            ext: '.min.css'
        }]
    }
}
  • 完整的Gruntfile.js
module.exports = function(grunt) {
    grunt.initConfig({
        // 导入上面的任务
    });

    // 加载组件
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // 注册任务
    grunt.registerTask('static', ['concat', 'uglify', 'cssmin']);
}

运行该配置脚本

grunt static

第二步

  • 静态资源添加md5信息

可用的Grunt组件有：grunt-filerev、grunt-usemin

  • 图片资源优化CSS SPRITE

可用组件：grunt-imagemin

第三步

  • DNS预解析
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<link rel="dns-prefetch" href="http://yourdomain.com">
  • CDN服务器

七牛存储提供的：开放静态文件CDN

附：可用的Grunt插件列表