Webpack之DllPlugin 和 DllReferencePlugin

一、什么是DllPlugin和DllReferencePlugin?

webpack官网上是这么定义的

通俗来说作用就是：

 DLLPlugin ：

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

 项目结构：

    首先需要新建一个webpack.dll.config.js文件。webpack.dll.config.js作用是把所有的第三方库依赖打包到一个bundle的dll文件里面，还会生成一个名为 manifest.json文件。

    manifest.json的作用是用来让 DllReferencePlugin 映射到相关的依赖上去的。

DllReferencePlugin：

    DllReferencePlugin作用是把刚刚在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？

1.首先在根目录下新建webpack.dll.conf.js文件，配置内容如下：

 

 DllPlugin配置参数说明：

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

因为我们项目用的是vue/cli3生成的，所以webpack的配置因卸载vue.config.js里。

2.执行构建： 

（1）先生成第三方库文件，需要在package.json文件命令里加入以下命令，执行npm run dll

 (2)执行完之后可以看到public文件夹下生成的文件如下