性能优化篇之打包优化-DllPlugin和DllReferencePlugin

什么是DLL？
DLL(Dynamic Link Library)文件为动态链接库文件,在Windows中，许多应用程序并不是一个完整的可执行文件，它们被分割成一些相对独立的动态链接库，即DLL文件，放置于系统中。当我们执行某一个程序时，相应的DLL文件就会被调用。
举个例子：很多产品都用到螺丝，但是工厂在生产不同产品时，不需要每次连带着把螺丝也生产出来，因为螺丝可以单独生产，并给多种产品使用。在这里螺丝的作用就可以理解为是dll。
为什么要使用Dll？
通常来说，我们的代码都可以至少简单区分成业务代码和第三方库。如果不做处理，每次构建时都需要把所有的代码重新构建一次，耗费大量的时间。然后大部分情况下，很多第三方库的代码并不会发生变更（除非是版本升级），这时就可以用到dll：把复用性较高的第三方模块打包到动态链接库中，在不升级这些库的情况下，动态库不需要重新打包，每次构建只重新打包业务代码。

还是上面的例子：把每次构建，当做是生产产品的过程，我们把生产螺丝的过程先提取出来，之后我们不管调整产品的功能或者设计（对应于业务代码变更），都不必重复生产螺丝（第三方模块不需要重复打包）；除非是产品要使用新型号的螺丝（第三方模块需要升级），才需要去重新生产新的螺丝，然后接下来又可以专注于调整产品本身。
我们先使用new BundleAnalyzerPlugin()可以对包进行分析
在项目build.js中打印出时间：
因为是用node进行启动，所以直接webpack中配置stats是不可以的。接下我们看看优化事前的时间和包的分析：

使用dllPlugin将react-dom，redux等单独打包：
先命名一个dll.config.js:

再命名一个webpack.dll.conf.js文件：

webpack配置里加上DllReferencePlugin配置：

AddAssetHtmlPlugin可以将文件动态插入到html。
package.json里进行配置：

经过打包之后:
先执行npm run dll,会多出文件：

然后执行npm run build:



从图中可以看出打包时间减少，也将主要资源进行了分包，多了others和react的包。
关于DllPlugin和DllReferencePlugin详细介绍可以移步webpack官网进行了解~~~