前端性能优化三十二：花裤衩模板DllPlugin安装

vue-cli3利用DllPlugin进行预编译,通过配置webpack插件DllPlugin进行打包速度优化,以及本地运行编译速度优化.

1. 安装相关插件:

yarn add webpack-cli@^3.2.3 add-asset-html-webpack-plugin@^3.1.3 clean-webpack-plugin@^1.0.1 -D

---

2. 生成dll文件:

(1). 编写配置文件(在项目根目录build下新建webpack.dll.conf.js):

const path = require('path')
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin')
// dll文件存放的目录
const dllPath = '../public/vendor'
module.exports = {
  entry: {
    // 需要提取的库文件
    vendor: ['vue', 'vue-router', 'vuex', 'axios', 'element-ui', 'echarts']
  },
  // 打包后的目录
  output: {
    path: path.join(__dirname, dllPath),
    filename: '[name]_dll_[hash:6].js',
    // vendor.dll.js中暴露出的全局变量名
    // 保持与webpack.DllPlugin中名称一致
    library: '[name]_lib_[hash:6]'
  },
  plugins: [
    // 清除之前的dll文件
    new CleanWebpackPlugin(['*.*'], {
      root: path.join(__dirname, dllPath)
    }),
    // 设置环境变量
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: 'production'
      }
    }),
    // manifest.json描述动态链接库包含了哪些内容
    new webpack.DllPlugin({
      path: path.join(__dirname, dllPath, '[name]-manifest.json'),
      // 保持与output.library中名称一致
      name: '[name]_lib_[hash:6]',
      // context需要和webpack.config.js保持一致
      context: process.cwd()
    })
  ]
}

注:
①. 在vue-cli3中一定要把生成的dll放到public中或自己去配置publicPath.

(3). 生成dll完成预编译(在package.json中加入):

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

(4). 控制台运行:

①. 打包:
    yarn run dll

②. vendor目录生成2个文件:
    a. webpack-dll-manifest.json:
       (1). 方便对lib.js中的模块进行引用.
       (2). webpack-dll-manifest.json给各个模块赋予id以便引用.
    b. lib.js:
       (1). 将axios、lodash、vue-router等合并打包为一个名为lib.js的静态资源包.

(5). 忽略已编译文件:

为了节约编译的时间,告诉webpack公共库文件已经编译好了,减少webpack对公共库的编译时间.