vue-cli3 DllPlugin 加快构建速度

起因

最近觉得vue项目构建时间较长，因而接触到了DllPlugin

官网：https://www.webpackjs.com/plugins/dll-plugin/
参考文档：https://juejin.im/post/5bfa696d51882579117f7d26

DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。

这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。

context (optional): manifest 文件中请求的上下文(context)(默认值为 webpack 的上下文(context))

name: 暴露出的 DLL 的函数名 (TemplatePaths: [hash] & [name] )

path: manifest json 文件的绝对路径 (输出文件)
new webpack.DllReferencePlugin(options)
通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上，之后再在需要的时候通过内置的 webpack_require 函数来 require 他们

安装

npm install webpack-cli@^3.2.3 add-asset-html-webpack-plugin@^3.1.3 clean-webpack-plugin@^1.0.1 --dev

在根目录下创建文件webpack.dll.conf ,内容如下：

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', 'vxe-table', 'vxe-table-plugin-element']
// entry: {
 //      vue: ['vue', 'vuex', 'vue-router'], // vue全家桶dll: vue.dll.js
   //    ec: ['echarts', 'echarts-wordcloud'], // echarts相关dll: ec.dll.js
     //  commons: [
           // 其他第三方库: commons.dll.js
       //]
   //}
 },
 output: {
   path: path.join(__dirname, dllPath),
   filename: '[name].dll.js',
   // vendor.dll.js中暴露出的全局变量名
   // 保持与 webpack.DllPlugin 中名称一致
   library: '[name]_[hash]'
 },
 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]_[hash]',
     context: process.cwd()
   })
 ]
}

使用命令dll

//在package里面配置
  "scripts": {
    "dll": "webpack -p --progress --config ./webpack.dll.conf.js"
  },
//然后 npm run dll 在public生成文件vendor

*生成目录

image.png

*编译

image.png

告诉webpack不要对公共库在进行编译

  configureWebpack: {
    plugins: [
      new webpack.DllReferencePlugin({
        context: process.cwd(),
        manifest: require('./public/vendor/vendor-manifest.json')
      })
    ]
  },

index.html 中加载生成的 dll 文件

公共库提取出来了，编译速度加快，在index.html插入script 标签

  <script src="./vendor/vendor.dll.js"></script>

最后编辑于：2020.05.26 13:35:05