webpack的一些实践优化

CommonsChunkPlugin 代码分割

无论多个页面还是单页面，有必要对公共部分提取处理，避免多次无必要加载，加快页面访问速度等。webpack中使用 CommonsChunkPlugin, 可参考 doc.webpack-china.org/plugins/com…

项目中使用，目前分为3个js(manifest, vendor, ##.js )， 配置如下：

// webpack.config.js
new webpack.optimize.CommonsChunkPlugin({
  name: ["vendor"],
  minChunks: function(module, count){
    return module.context
                && count >= 3
                && module.context.indexOf("node_modules") !== -1;
  }
}),
new webpack.optimize.CommonsChunkPlugin({
  name: "manifest",
  minChunks: Infinity
}),

对比如下:

未提取前:

提取后：

DllPlugin 打包速度优化

参考如下图，使用与未使用的区别

原理是 dllplugin 先打包好，再打包 webpack.prod.conf.js 的时候，就不会再去打包在 dll-manifest.json 里存在的，提升了打包的速度，这比 CommonsChunkPlugin 要好的地方。 另外打包出来的 dll.js，可以多项目公用，只需要正确的 dll-manifest.json 即可，配合前面所说的 CommonsChunkPlugin，则需要引入 4 个js。 下面是一个示例配置代码: webpack.dll.conf.js:

// webpack.dll.conf.js
var path = require("path");
var webpack = require("webpack");

module.exports = {
  // 你想要打包的模块的数组
  entry: {
    vendor: ['vue', 'vuex', 'axios', 'vue-router', 'element-ui', 'coffee-tmpl',
     'quill', 'echarts', 'brace', 'brace/mode/javascript'
      , 'brace/mode/html', 'brace/mode/css']
  },
  output: {
    path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
    filename: '[name].dll.js',
    library: '[name]_library'
    // vendor.dll.js中暴露出的全局变量名。
    // 主要是给DllPlugin中的name使用，
    // 故这里需要和webpack.DllPlugin中的`name: '[name]_library',`保持一致。
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library',
      context: __dirname
    }),
    // 压缩打包的文件，与该文章主线无关
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

webpack.prod.conf.js:

// webpack.prod.conf.js
plugins: [
  new webpack.DllReferencePlugin({
    context: __dirname,
    manifest: require('./vendor-manifest.json')
  }),
  ...
]