dll预编译提高webpack打包速度

一，webpack的dll功能

基于webpack3构建

1.1 dll介绍

我们构建前端项目的时候，往往希望第三方库（vendors）和自己写的代码可以分开打包，因为第三方库往往不需要经常打包更新。对此Webpack的文档建议用CommonsChunkPlugin来单独打包第三方库

• 我们这里的dll.js是提前打包好了的，而不是在每次build的时候去打包输出的；这样才能做到依赖包一次构建，无限次使用
• webpack输出的文件名都带有hash值；而用dll合并后输出的文件名是固定的

条目：{ vendor：[ “ jquery”，“ other-lib” ]， app：“ ./entry” } new CommonsChunkPlugin（{ name：“ vendor”， //文件名：“ vendor.js” //（给块一个不同的名称） minChunks：Infinity，//（带有更多条目，这确保没有其他模块//进入供应商块） }）

通常为了对抗缓存，我们会给售出文件的文件名中加入hash的后缀-但是-我们编辑了app部分的代码后，重新打包，发现vendor的hash也变化了

 

这么一来，意味着每次发布版本的时候，供应商代码都要刷新，直到我并没有修改其中的代码。这样并不符合我们分开打包的初衷

• Dll是Webpack最近新加的功能
• Dll概念这个应该的英文借鉴了Windows系统-的dll。一个dll包，就是一个纯纯的依赖库，它本身不能运行，用来的英文给你的app引用的
• 打包dll的时候，Webpack重置所有包含的库做一个索引，写在一个manifest文件中，而引用dll的代码（dll user）在打包的时候，只需要读取这个manifest文件，就可以了。

优势

• Dll打包以后是独立存在的，只要其包含的库没有增减，升级，hash也不会变化ÿ