Webpack学习篇

《深入浅出Webpack》优化篇 02

本文继续记录学习Webpack优化的内容，本文的中心仍然是在Webpack构建阶段的优化上面，主要学习的技术是如何使用Webpack的DLLPlugin,本文主要内容如下：

• 使用DLLPLugin
  1. 认识DLL
  2. 接入Webpack

认识DLL

动态链接库（英语：Dynamic-link library，缩写为DLL）是微软公司在windows系统中实现共享函数库概念的一种实现方式。这些库函数的扩展名是.DLL、.OCX（包含ActiveX控制的库）或者.DRV（旧式的系统驱动程序）。所谓动态链接，就是把一些经常会共享的代码（静态链接的OBJ程序库）制作成DLL档，当可执行文件调用到DLL档内的函数时，Windows操作系统才会把DLL档加载存储器内，DLL档本身的结构就是可执行档，当程序有需求时函数才进行链接。通过动态链接方式，存储器浪费的情形将可大幅降低。 -维基百科.

总结出来就是两个字 共享，要给web项目接入该思想，需要完成下面的事情

1. 将网页依赖的基础模块抽离，打包到一个个单独的动态链接库中，在一个动态链接库中可以包含多个文件
2. 当需要导入的模块存在于某个动态链接库中，该模块不能被再次打包，而是去动态链接库中获取
3. 页面依赖的所有动态链接库都要被加载进来

接入动态链接库能提升构建速度的原因在于，包含大量复用模块的动态链接库只需要被编译一次，在之后就不用被编译了，直接使用动态链接库中的代码。如果我们不更新模块的版本，则动态链接库就不需要重新编译。

接入Webpack

我们只需要Webpack提供的两个内置插件就可以接入，如下：

• DLLPlugin:用于打包出一个个单独的动态链接库文件
• DLLReferencePlugin:用于在主配置中引入DLLPlugin打包好的动态链接库文件

实践：
首先搭建一个简单的vue开发环境，(请忽略element-ui)

然后，让我们看一下不接入动态链接库时候的构建速度：

然后，再看一下接入之后的构建速度：

可见差距还是很明显的，让我们来深入了解一下其中的本质，首先我们，通过webpack --config webpack_dll.config.js来将指定文件打包成一个个的动态链接库.webpack_dll.config.js配置如下:

然后这时候，会生成如下文件(我这里只用了vue和moment两个库)：

然后我们打开vue的来看：

vue.manifest.json中的name表示该动态链接库暴露在全局的变量名，json文件中id就是动态链接库文件中的某个键，对应的值便是已经编译g过的vue。然后我们在主配置的入口文件中遇到依赖的模块在dll.js中时候，会直接通过dll.js暴露的全局变量获取打包在dll.js文件中模块，所以我们需要手动在模板html中引入提前编译好的dll.js文件：