你真的需要 Webpack DllPlugin 吗？

如果大家看过一些 webpack4 优化的文章，一定会出现 dll 动态链接库。它以配置之复杂让众多初学者记忆犹新。今天我会以一个学习者的角度去一步一步探讨 webpack dll 的配置，最后得出一个完美的解决方案。 本文的内容和大部分讲解 webpack4 优化文章的观点不一样，如果有不同的见解，欢迎在评论区和我讨论。 友情提示：本文章不是入门教程，不会费大量笔墨去描写 webpack 的基础配置，请读者配合教程[源代码](https://github.com/skychx/webpack_learn/tree/master/optimization)食用。 1. 基础概念：dll 其实就是缓存 说实话我刚看见这个 dll 动态链接库的时候，我真被镇住了：这是什么玩意？怎么根本没听说过？ 好学的我赶紧 Google 一下，在维基百科里找到了标准定义： 所谓动态链接，就是把一些经常会共享的代码制作成 DLL 档，当可执行文件调用到 DLL 档内的函数时，Windows 操作系统才会把 DLL 档加载存储器内，DLL 档本身的结构就是可执行档，当程序有需求时函数才进行链接。透过动态链接方式，存储器浪费的情形将可大幅降低。 唉，你们官方就是不说人话。 我结合 webpack，从前端的角度翻译一下： 具体到 webpack 这块儿，就是事先把常用但又构建时间长的代码提前打包好（例如 react、react-dom），取个名字叫 dll。后面再打包的时候就跳过原来的未打包代码，直接用 dll。这样一来，构建时间就会缩短，提高 webpack 打包速度。 我盯着上面那句话看了三分钟，什么 DLL，什么动态链接库，在前端世界里，不就是个缓存吗！都是拿空间换时间。 注：在这里狭义上可以理解为拿空间换时间，如果真的要探讨 dll 背后的知识：动态链接库和静态链接库，就又涉及到编译器的知识了，具体讲下去又是一篇新的文章了，所以暂时按下不表。 我们对比一下 DLL 和前端常接触的网络缓存，一张表就看明白了： DLL        缓存 1.把公共代码打包为 DLL 文件存到硬盘里        1.把常用文件存到硬盘/内存里 2.第二次打包时动态链接 DLL 文件，不重新打包        2.第二次加载时直接读取缓存，不重新请求 3.打包时间缩短        3.加载时间缩短 所以在前端世界里， DLL 就是个另类缓存。 2. DLL 手动配置：这么多步