webpack之优化篇（四）：hard-source-webpack-plugin,webpack DllPlugin配置的代替方案

webpack系列说明

已完成：

基础篇

1. webpack之基础篇（一）：webpack的基础认识
2. webpack之基础篇（二）：前端基本开发环境的搭建
3. webpack之基础篇（三）：配置loader和plugin
4. webpack之基础篇（四）：webpack-dev-server浅析
5. webpack之基础篇（五）：配置开发、测试、生产环境

优化篇

1. webpack之优化篇（一）：优化静态资源
2. webpack之优化篇（二）：优化配置提高构建速度
3. webpack之优化篇（三）：http压缩之Gzip
4. webpack之优化篇（四）：webpack DllPlugin配置的代替方案hard-source-webpack-plugin

原理篇

1. webpack之原理篇（二）：hash、chunkhash、contenthash的认

编写中：

1. webpack之原理篇（一）：webpack的工作流程和原理
2. webpack之原理篇（三）：webpack-dev-server原理
3. webpack之原理篇（四）：手写loader
4. webpack之原理篇（五）：手写plugin

最近看过很多webpack优化的文章，webpack dll 动态链接库经常会出现。但是在用的时候，常常因为配置之复杂望而却步，最后寻找到类似hard-source-webpack-plugin这样优秀的插件。

dll的概念: 其实是做缓存

所谓动态链接，就是把一些经常会共享的代码制作成 DLL 档，当可执行文件调用到 DLL 档内的函数时，Windows 操作系统才会把 DLL 档加载存储器内，DLL 档本身的结构就是可执行档，当程序有需求时函数才进行链接。透过动态链接方式，存储器浪费的情形将可大幅降低。

将dll和缓存进行对比可以发现：

缓存	DLL
把常用的文件存储到内存或硬盘中	把公共代码打包为dll文件放到硬盘中
再次打包时，直接取读取缓存	再次打包时，读取dll文件，不重新打包
加载时间减少	打包时间减少

个人理解的dll基本过程：

1. 第一次npm run的时候，把请求的内容存储起来（存储在映射表中）

2. 再次请求时，先从映射表中找，看请求的内容是否有缓存，有则加载缓存（类似浏览器的缓存策略，命中缓存），没有就正常打包。

3. 直接从缓存中读取。

dll的应用: 配置繁琐

用 DllPlugin 处理文件，要分两步走：