初尝Vue3，通过DllPlugin 和 DllReferencePlugin优化打包

不念不忘少年蓝@ 2022-12-23 03:29 278阅读 0赞

# 前言 #

最近尝试了一下vue3.0，搭建起了一个小demo，思考到开发打包和搭建通用化和打包编译效率，今天就记录一下在越来愈多的需求和组件写完后怎么才能提高webpack的build速度和针对当前vue-cli3.x搭建的项目dll文件抽离配置。

# **什么是DLLPLUGIN 和 DLLREFERENCEPLUGIN** #

在使用webpack进行打包时候，对于依赖的第三方库，比如vue，vuex等这些不会修改的依赖，我们可以让它和我们自己编写的代码分开打包，这样做的好处是每次更改我本地代码的文件的时候，webpack只需要打包我项目本身的文件代码，而不会再去编译第三方库，那么第三方库在第一次打包的时候只打包一次，以后只要我们不升级第三方包的时候，那么webpack就不会对这些库去打包，这样的可以快速的提高打包的速度。因此为了解决这个问题，DllPlugin 和 DllReferencePlugin插件就产生了。

那么对于目前webpack社区来讲，我们希望和自己编写的代码分离开的话，webpack社区提供了2种方案：

1.  **CommonsChunkPlugin**
2.  **DLLPlugin**

**CommonsChunkPlugin** 插件每次打包的时候还是会去处理一些第三方依赖库，只是它能把第三方库文件和我们的代码分开掉，生成一个独立的js文件。但是它还是不能提高打包的速度。在vue3.x的vue.config配置文件中我们可以从官网找到optimization的配置，此配置很实用，具体的操作这里就不介绍，可官网查看[optimization][]配置

**DLLPlugin** 它能把第三方库代码分离开，并且每次文件更改的时候，它只会打包该项目自身的代码。所以打包速度会更快。

**DLLPlugin** 这个插件是在一个额外独立的webpack设置中创建一个只有dll的bundle，也就是说我们在项目根目录下除了有webpack.config.js，还会新建一个webpack.dll.config.js文件。webpack.dll.config.js作用是把所有的第三方库依赖打包到一个bundle的dll文件里面，还会生成一个名为 manifest.json文件。  
该manifest.json的作用是用来让 DllReferencePlugin 映射到相关的依赖上去的。

**DllReferencePlugin** 这个插件是在webpack.config.js中使用的，该插件的作用是把刚刚在webpack.dll.config.js中打包生成的dll文件引用到需要的预编译的依赖上来。什么意思呢？就是说在webpack.dll.config.js中打包后比如会生成 vendor.dll.js文件和vendor-manifest.json文件，vendor.dll.js文件包含所有的第三方库文件，vendor-manifest.json文件会包含所有库代码的一个索引，当在使用webpack.config.js文件打包DllReferencePlugin插件的时候，会使用该DllReferencePlugin插件读取vendor-manifest.json文件，看看是否有该第三方库。vendor-manifest.json文件就是有一个第三方库的一个映射而已。

所以说 第一次使用 webpack.dll.config.js 文件会对第三方库打包，打包完成后就不会再打包它了，然后每次运行 webpack.config.js文件的时候，都会打包项目中本身的文件代码，当需要使用第三方依赖的时候，会使用 DllReferencePlugin插件去读取第三方依赖库。所以说它的打包速度会得到一个很大的提升

# **在项目中如何使用 DLLPLUGIN 和 DLLREFERENCEPLUGIN** #

由于是vue3.x的脚手架，所以这里说一下vue.config中的配置方法；其实就算用vue2.x的脚手架也只是目录不同，方法相同，毕竟这些工作是webpack做的

首先在根目录创建一个webpack.dll.conf的js文件代码如下：

const path = require('path')
    const webpack = require('webpack')
    const {CleanWebpackPlugin} = require('clean-webpack-plugin')
    // dll文件存放的目录(建议存放到public中)
    const dllPath = './public/vendor'
    module.exports = {
      mode: 'production',
      entry: {
        vendor: ['vue/dist/vue.runtime.esm.js', 'vuex', 'vue-router', 'element-ui', 'axios', 'moment']
      },
      output: {
        filename: '[name].dll.js',
        path: path.resolve(__dirname, dllPath),
        library: '[name]_[hash]'
      },
      plugins: [
        new CleanWebpackPlugin(),
        new webpack.DllPlugin({
          name: '[name]_[hash]',
          path: path.join(__dirname, dllPath, '[name].manifest.json'),
          context: process.cwd()
        })
      ]

**注：不知道是不是项目包的webpack是3.x的缘故，需要在项目中安装webpack-cli;`npm i webpack-cli -D`*\*\****

如上代码我们还用到了clean-webpack-plugin插件，每次打包清除上次的文件夹

**DllPlugin 插件有三个配置项参数如下：**  
**context(可选)：** manifest文件中请求的上下文，默认为该webpack文件上下文。  
**name:** 公开的dll函数的名称，和 output.library保持一致。  
**path:** manifest.json 生成文件的位置和文件名称。

然后需要在package中scripts中配置命令`"dll": "webpack -p --progress --config ./webpack.dll.config.js"`命令这样我们就可以在需要的时候把包单独抽离出来了

下面重点来了，vue.config.js配置如下：

const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
    function resolve(dir) {
      return path.join(__dirname, dir)
    }
    const dllReference = (config) => {
      config.plugin('vendorDll')
        .use(webpack.DllReferencePlugin, [{
          context: __dirname,
          manifest: require('./public/vendor/vendor.manifest.json')
        }])
      config.plugin('addAssetHtml')
        .use(AddAssetHtmlPlugin, [
          [
            {
              filepath: resolve(__dirname, 'public/vendor/vendor.dll.js'),// dll文件位置
              outputPath: 'vendor',// dll最终输出的目录
              publicPath: '/vendor'// dll 引用路径
            }
          ]
        ])
        .after('html')
    }
    module.exports = {
    true......
    truechainWebpack: config => {
        dllReference(config)
      },
    }

用add-asset-html-webpack-plugin插件，是为了省去手动修改template/html这一步骤

**DllReferencePlugin项的参数有如下：**

**context:** manifest文件中请求的上下文。  
**manifest:** 编译时的一个用于加载的JSON的manifest的绝对路径。  
**context:** 请求到模块id的映射(默认值为 manifest.content)  
**name:** dll暴露的地方的名称(默认值为manifest.name)  
**scope:** dll中内容的前缀。  
**sourceType:** dll是如何暴露的libraryTarget。

效果

使用DllPlugin打包前 用时32.065s

使用DllPlugin打包后 用时 8.524s

[optimization]: https://webpack.js.org/configuration/optimization/#root