vue-cli3中webpack.dll打包优化

配置webpack dllPlugin提升打包速度，大家都知道dll打包优化是为了将依赖的第三方库（'vue', 'vue-router', 'axios', 'vant', 'moment'）单独提取，一次打包生成后，以后打包不再这些库不会再打包！因为第三方库一般情况下很少会改动。

我们来看一下vue-cli3中如何配置dllPlugin来做优化：

首先：

需要新建一个webpack.dll.conf.js的文件，直接上代码吧，代码里写注释更为清楚明了：

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const dllPath = 'public/vendor';

module.exports = {
  entry: {
    vendor: ['vue', 'vue-router', 'axios', 'vant', 'moment']
  },
  output: {
    path: path.resolve(__dirname, dllPath),
    filename: '[name].dll.js',
    // vendor.dll.js中暴露出全局变量名
    // 保持与webpack.DllPlugin中名称一致
    library: '[name]_[hash]' // **这一处必需与下一处相同**
  },
  plugins: [
    // 清除之前的dll文件
    new CleanWebpackPlugin(),
    // manifest.json描述动态链接库包含了哪些内容
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
      // 保持与output.library中名称一致
      name: '[name]_[hash]', // **这一处必需与上一处相同**
      context: process.cwd()
    })
  ]
};

然后：

在package.json中加入如下命令：

"scripts": {
    ...
    "dll": "webpack -p --progress --config ./webpack.dll.conf.js"
}

运行 yarn run dll之后，public文件夹里的就会多出一个vendor文件夹，里面包含vendor.dll.js 和 vendor-manifest.json 两个文件。

接下来：

因为vue-cli3已经把配置文件给内嵌了...但是可以自行在根目录下添加一个vue.config.js，然后就可以动手配置打包文件了！开始之前先npm install -D add-asset-html-webpack-plugin，把该装的插件给装上：

const webpack = require('webpack');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const path = require('path');
// 这些代码就是dll优化的代码
const dllReference = (config) => {
  config.plugin('vendorDll')
    .use(webpack.DllReferencePlugin, [{
      context: __dirname,
      manifest: require('./public/vendor/vendor-manifest.json')
    }]);
  // 这里是把相关文件引用入到html模板中
  config.plugin('addAssetHtml')
    .use(AddAssetHtmlPlugin, [
      [
        {
          filepath: require.resolve(path.resolve(__dirname, 'public/vendor/vendor.dll.js')),
          outputPath: 'vendor',
          publicPath: 'vendor'
        }
      ]
    ])
    .after('html')
};

module.exports = {
  chainWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') { // 这里区分下，只有生产环境才需要用到
      dllReference(config)
    }
  }
};

此时执行yarn build

打包目录下就会多生成这些文件，vendor.dll.js就是提取出来的公共库文件了！