webpack分离第三方库的解决方案-DllPlugin和DllReferencePlugin

1. 官方说明

This plugin is used in a separate webpack config exclusively to create a dll-only-bundle. It creates a manifest.json file, which is used by the DllReferencePlugin to map dependencies.

这个插件用来分离构建bundle包，原理是生成一个mainfest.json文件，给DLLReferencePlugin插件来根据依赖构建bundle包；前者可以让你生成索引，后者把你的引用连接到真实的模块。

2.分离第三方库的优点

• 加快编译速度
• 加快打包速度，第三方库版本稳定，打包一次之后，可以很长时间使用这个版本包，等到第三方库更新再打包，平时就是打包项目业务代码
• 合理利用浏览器缓存

3. 使用方法

4. 编译速度的提升

使用dll文件后，会打包一个vendor文件，这个文件是打包了指定的第三方库，
文件大小和打包速度：

image.png

业务代码文件大小和打包速度：

image.png

编译的时候，只修改业务代码，只会编译业务代码文件，编译速度很快：
没使用dll的情况下，业务代码很大，而且只修改业务代码，都要重新编译打包很大的文件：

image.png

5.对于第三方包缓存的利用

因为第三方包只在我们主动npm run dll的情况下重新打包，重新生成hash，所以其他情况下，这个库文件是永远不变的，Etag不会改变，缓存永远有效，浏览网页的时候这个库文件便可以一直利用缓存