webpack 性能优化 - dll

首先创建webpack.dll.config.js文件

const path = require('path')
const webpack = require('webpack')

module.exports = {
  // 想要打包模块的数组
  entry: {
    vendor: ['vue/dist/vue.esm.js', 'vuex', 'vue-router', 'element-ui', 'vue-resource', 'vue-filter', 'vue2-filters', 'mathjs', 'echarts']
  },
  output: {
    path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '../static/js', '[name]-manifest.json'),
      name: '[name]_library', 
      context: __dirname
    }),
    new webpack.optimize.UglifyJsPlugin({ 
      compress: {
        warnings: false
      }
    })
  ]
}

修改webpack.base.conf.js文件内容

1. 引入 var webpack = require(‘webpack’)
2. 添加如下插件

 plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('../static/js/vendor-manifest.json')
    })
  ],

修改package.json文件

1. 安装依赖”webpack-cli”: “^2.0.0”,
2. 增加指令"dll": "webpack --config build/webpack.dll.config.js",

注意：npm run dll 将会把entry.vendor中相关的代码打成一个vendor.dll.js包。这个包需要手动在index.html中引入。