使用webpack的DllPlugin和DllReferencePlugin优化打包速度（150s降至39s）

前言

项目是基于jeecgBoot这个低代码生成器做二次开发的，内部集成了很多功能，但项目本身仅用了其中部分功能，因此，打包时候特别慢。为了具体看打包时间，安装了progress-bar-webpack-plugin，打包时间如下：

这就很坑了，超过两分钟了都！！！必须优化，时间就是生命！！

打包分析

既然打包慢，就需要分析到底是哪慢的。为此，我安装了webpack-bundle-analyzer（注意：如果是vue-cli脚手架打包的，则执行vue-cli-service build --report，会在打包后的包体中生成一个report.html）来分析原因，它会生成一个页面来帮你分析哪个模块体积大，如下图：

有了原因，下面就是如何去针对性的优化了。

优化1–替换体积大的模块

上图中，显示jeecgBoot这个框架本身模块（@jeecg/antd-online-beta220）比较大（5M了）。于是，我就去npm上找，看它有没有发布一个优化后的小包，果然有！！！

结果安装试了下，发现并没有明显的变化，其实这个小包，也是有点大的，1M多。于是，继续优化。

优化2–DllPlugin和DllReferencePlugin分包

这两个插件是webpack内置的，可以放心使用。

• 对于DllPlugin使用，需要一个额外的webpack配置文件，这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。配置如下：

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

module.exports = {
    entry: [
        '@jeecg/antd-online-beta220-mini',
        'tinymce',
        '@antv/g2/build/g2.js',
        '@ant-design/icons/lib/dist.js'
    ],
    output: {
        filename: 'dll.js',
        path: path.resolve('public/dll_vendor'), // 输出的路径
        library: 'dll_vendor' // 就是输出的文件夹的名称
    },
    mode: 'production', // 构建生产环境
    plugins: [
        new webpack.DllPlugin({
            name: 'dll_vendor',
            path: path.resolve('public/dll_vendor', 'manifest.json')
        })
    ]
}

然后，在package.json中增加如下命令：

"dll": "webpack --config ./webpack.dll.js"

• DllReferencePlugin该插件需要在项目主配置文件中配置。我这里是在vue-cli 的配置文件中配置的。（切忌将该配置仅局限在生产环境中运行）

// dllReferencePlugin相关配置
config.plugin('dll-reference-plugin').use(new webpack.DllReferencePlugin({
    manifest: require('./public/dll_vendor/manifest.json'),
    name: 'dll_vendor'
}))

打好的dll包体引入问题

用这两插件分包的目的是，先打包好在整个开发中，不需要改动的体积大的第三方库，仅需打包一次，后面打包，仅针对其他模块和我们编写的js文件打包。那么打好的dll包体，如何在index.html引用呢？我这项目基于使用的框架的本身局限。我是直接放在public文件夹中的，用script标签在index.html中引用，这样，无论在开发还是生产中都是可以的。

打包

先执行npm run dll打出dll包，然后，build下，时间如下：

后续

其实，这里打包时间还是有点长的，有优化的空间。。。