webpack 优化之 DllPlugin

作用： 直接引用打包好的第三方包， 不用每次再打包

假设项目中使用了 vue, vue-router, element-ui

首先需要创建 webpack.dll.conf.js：

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

module.exports = {
  entry: {
    vue: ['vue', 'vue-router'],
    ui: ['element-ui']
  },

  output: {
    path: path.join(__dirname, '../src/dll'),
    filename: '[name].dll.js',
    library: '[name]'
  },

  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '../src/dll', '[name]-manifest.json'),
      name: '[name]'
    }),

    new webpack.optimize.UglifyJsPlugin()
  ]
}

然后 webpack --config ./build/webpack.dll.conf.js 打包：

上述是打包好后的代码，如何使用呢？

使用 DllReferencePlugin

在 build/webpack.config.js 中添加下列插件：

打包结果：

实测打包时间为原来的四分之一，当然项目大可能没这么明显，但是效果是显著的。