如果您已经阅读了一些 webpack 优化文章，DLL 动态链接库一定会出现。它的配置复杂性在许多初学者的记忆中仍然记忆犹新。
明天我将从一个学习者的角度逐步解释 webpackdll 的配置，最后想出一个完美的解决方案。
本文的内容与大多数解释 webpack 优化的文章不同，如果您有不同意见，请随时在评论区与我讨论。
“ ⚠️
友情提示：本文不是介绍性教程，不会花很多笔来描述 webpack 的基本配置，请配合教程源码 [1] 吃。
1. 基本概念：DLL 是缓存
老实说，当我第一次看到这个DLL动态链接库时，我真的很震惊：这是什么东西？怎么一点都不说？
我很快在谷歌上搜索并在维基百科中找到了标准定义[2
]。
“
所谓动态链接，就是把一些经常共享的代码变成DLL文件，当可执行文件调用DLL文件中的函数时，Windows操作系统就可以把DLL文件加载到内存中，DLL文件的结构本身就是可执行文件，这时程序就有了函数链接的需要。通过动态链接，可以大大减少内存浪费。
唉，每个人都正式不会说人类语言。
我将从 Web 后端的角度结合 webpack 和翻译：
具体到 webpack，就是提前打包常用但早已建立的代码（如 react、react-dom），为 dll 选择一个名称。在它旁边打包时，跳过原始未打包的代码并直接使用 DLL。这样，将缩短沉降时间并提高webpack包装率。
我盯着上一句看了三分钟，哪些DLL，哪些动态链接库，在后端世界，不就是缓存吗！
“
注意：这可以狭义地理解为缓存，如果你真的想解释DLL背后的知识：动态链接库和静态链接库，它涉及其他领域的知识。具体来说，这是一篇新文章，所以我暂时不会按表。
让我们比较一下 DLL 和后端经常接触的网络缓存，可以看到一个表：
DLL 缓存
1.将公共代码打包为DLL文件并保存到硬盘
1.将常用文件保存到硬盘/视频内存
2.第二次打包时动态链接DLL文件，不要重新打包
2. 在第二次加载时直接读取缓存，无需重新提供
3. 更短的包装时间
3. 减少加载时间
因此，在后端世界中，DLL 是一种替代缓存。
2.DLL 自动配置：这么多步骤记不住让我们
一开始不做配置，让我们想象一下，如果您要自动创建和管理缓存webpack配置教程，您会做什么。
我想这就是你通常的想法：
当你提出第一个请求时，存储请求的内容
构建映射表，
当有后续请求时，首先按照这个映射表查看要请求的内容是否缓存，如果有缓存，加载缓存，然后经过正常的请求过程（所谓的缓存命中问题）。
命中缓存后，内容直接从缓存中获取并移交给程序进行处理
主要过程是
无非就是这 3 个步骤，如果你想把事情做大，你可以添加一些权重、过期时间、多级缓存什么的，但主要过程是前 3 个步骤。
平时我们在开发的时候，浏览器、HTTP合约帮我们包装这个操作，我们只记得几个参数来调整参数;而 webpackdll 则不同，它需要我们自动实现前 3 个步骤，所以很枯燥+复杂。
下面的代码很乱，因为我还没有准备好谈论这种迂回的配置，具体结构最好看看我 github 上发布的示例源代码 [3]，我看不懂，旁边有更好的解决方案。
“ ⚠️
：如果您看得无聊，请跳过下面的内容
在步骤 1 中，我们首先创建 DLL 文件，相当于
存储第一个请求的内容，然后我们还创建一个映射表webpack配置教程，告诉程序我们将哪个文件制作成 DLL（这相当于步骤 2）：
首先，我们编写一个打包脚本来创建DLL文件，目的是将react，react-dom打包到DLL文件中：
// 文件目录：configs/webpack.dll.js
// 代码太长可以不看
'use strict';
const path = require('path');
const webpack = require('webpack');
module.exports = {
mode: 'production',
entry: {
react: ['react', 'react-dom'],
},
// 这个是输出 dll 文件
output: {
path: path.resolve(__dirname, '../dll'),
filename: '_dll_[name].js',
library: '_dll_[name]',
},
// 这个是输出映射表
plugins: [
new webpack.DllPlugin({
name: '_dll_[name]', // name === output.library
path: path.resolve(__dirname, '../dll/[name].manifest.json'),
})
]
};
现在打包脚本已经编写好了，我们必须运行它，对吧？所以我们编写了一个运行脚本，并把它放在package.json的scripts标签中，这样我们就可以通过运行npmrunbuild：dll来打包dll文件：
// package.json
{
"scripts": {
"build:dll": "webpack --config configs/webpack.dll.js",
},
}
第三步，链接dll文件，即
告诉 Webpack 可以打 DLL 文件，配置也是一团糟：
// 文件目录：configs/webpack.common.js
// 代码太长可以不看
const path = require('path');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin'); // 顾名思义，把资源加到 html 里，那这个插件把 dll 加入到 index.html 里
const webpack = require('webpack');
module.exports = {
// ......
plugins: [
new webpack.DllReferencePlugin({
// 注意: DllReferencePlugin 的 context 必须和 package.json 的同级目录，要不然会链接失败
context: path.resolve(__dirname, '../'),
manifest: path.resolve(__dirname, '../dll/react.manifest.json'),
}),
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, '../dll/_dll_react.js'),
}),
]
}
为了减少一些小库的二次打包时间，我们在 3 个文件中写了一堆配置代码，小心翼翼，比如如履薄冰，中间可能都因为范围问题链接而失败（没错，就是我）。配置 DLL 会带来巨大的心理阴影，还有没有其他方法可以增加我们的精神负担？
3.自动Dll插件：减轻您的配置负担
在第 2 节中，我疯狂地劝阻不要引入这个插件：autodll-webpack-plugin[4]，它集成了前面的 3 段代码，让我们摆脱复杂的配置，让我们看看它是如何工作的：
// 文件目录：configs/webpack.common.js
const path = require('path');
const AutoDllPlugin = require('autodll-webpack-plugin'); // 第 1 步：引入 DLL 自动链接库插件
module.exports = {
// ......
plugins: [
// 第 2 步：配置要打包为 dll 的文件
new AutoDllPlugin({
inject: true, // 设为 true 就把 DLL bundles 插到 index.html 里
filename: '[name].dll.js',
context: path.resolve(__dirname, '../'), // AutoDllPlugin 的 context 必须和 package.json 的同级目录，要不然会链接失败
entry: {
react: [
'react',
'react-dom'
]
}
})
]
}
autodll-webpack-plugin 的使用是
和 webpack 其他插件的使用非常相似，自动引入 DLL 的方式也简单了很多，但是这个插件之前被 Vue-CLI 用过，而且质量比较稳定，你可以放心使用。
4. 沟渠 DLL：Vue & React 的官方共同选择
在第 3 节中，我说 autodll-webpack-plugin 以前被 vue-cli 使用过，这意味着它不再使用？有错误吗？这不是真的。
在学习 webpack 的时候，为了学习业界优秀框架的 webpack 配置，我特意查看了 vue-cli 和 create-react-app 的源代码，但没有发现任何 dll 配置的痕迹。
这很奇怪，我翻了一些nuxt.js1.0的源代码，上面有一个dll配置代码，按理说vue-cli也应该有，我想在一些升级中，dll被删除了。所以我开始查找提交记录，果然，我找到了它：
“
白皮书以白纸黑字书写，删除DLL选项3大字写得清晰
原因是什么？在本期[5]中，玉玉玺解释了移除的原因：
“
dlloption将被移除。Webpack4shouldprovidegoodenoughperfandthecostofmaintenanceingDLLmodeinsideVueCLIisnolongerified.
dll
配置将被移除，并且由于 Webpack4 打包足够好，因此 dll 无需在 VueClI 中继续维护。
类似地，在这个 PR [6] 的 create-react-app 中给出了类似的解释：webpack4 比 dll 具有更好的打包性能。
因此，如果项目在 WebPack4 上，使用 DLL 的利润并不大。我用实际项目的代码尝试了一下，添加 DLL 可能会使速率提高 1-2 秒，这对于整体打包时间可以忽略不计。
Vue 和 React 官方 2018 年不再使用 dll，现在 2020 年快结束了，所以我之前说的没用，你不需要学习，不要松一口气（疯狂的提示喜欢）？
5. 比 DLL 更好的插件
DLL构建加速不再重要，有更好的选择吗？在 AutoDllPlugin [7] 的 README.md 中，我们推荐使用 HardSourceWebpackPlugin [8]，它最初配置起来更简单，只需要一行代码：
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
module.exports = {
// ......
plugins: [
new HardSourceWebpackPlugin() // <- 直接加入这行代码就行
]
}
这个插件加速有多重要？我测试了本文的示例代码，右图是常规打包时间，大约 900ms：
添加DLL优化后，打包时间为507ms，缩短约400ms：
仅使用HardSourceWebpackPlugin，打包时间减少到253ms：
查看相关文档 [9]，实际上这项技术直接放在 webpack5 中，开箱即用。所以，虽然你不必学习DLL的配置，webpack5即将到来......
webpack 5.1.16. 写在最后
很难说这篇文章是一个教程，它更多的是关于在我的学习 webpack 中记录一个查询过程。老实说，我自动完成了dll，并认为我相当NB，我可以很好地匹配如此复杂的配置。
当我找到 autodll-webpack-plugin 并发现 DLL 在 webpack 构建加速领域早已被抛弃时，虽然还是有些沮丧，但我觉得我之前的努力是徒劳的，不禁形成了自己学不了的想法。而当我仔细思考DLL的原理时，我发现这是一回事，占用空间换时间，只是配置稍微复杂一些。
所以这也提醒我们在学习新知识时，不要注重工艺配置和参数调整。由于该过程最终将得到简化，因此参数（API）最终将升级。要抓大放小，把精力放在最核心的内容上，因为核心思想最不容易过时。
❤️ 看完三件事
如果你觉得这篇文章对你很有启发，我想请你帮我三个小忙：
vuecli 和 webpack 有什么区别？
Vuecli是Vue的官方框架，用于初始化Vue项目。 目前支持生成vue2和vue3项目。 Webpack 是一个通用的后端打包工具。 它的核心思想是一切都是模块，其使用与Vue无关。它可以用于任何技术栈的后端项目
Vuecli相当于脚手架，可以为你手动生成模板项目； Vuerouter 是一个 Vuerouting 插件，它支持您的单页应用程序； Vueloader是webpack下的loader插件，可以输出。 Vue 文件作为组件。
vue 和 vue-cli 是什么关系？
明天刚开始了解Vuecli3.0。 我开始编写一个演示，发现它非常棒。 我抛弃了版本2复杂的web配置，现在可以说是简单明了，甚至都不用写了。 vue.config.js 文件并不重要。 免费。 无论如何，它是无害的。 而且如果你配置一下，你会发现并不麻烦。
据我所知，不应该有任何脚手架能够更快、更直接地反映链表或对象的更改。
另外vue webpack配置，这句糖基本没变。 过去怎么用或者今天怎么用，都有很多性能优化和句子甜头。 说真的，我根本找不到vue-cli3.0的致命bug。
后来我也听到有人发声反对JQ不公平。 一年半前，我用JQ来写。 当时我认为JQ是JS最好的框架。 太方便了，DOM操作太爽了。 直到我写了一张课程表项目卡。 。 。
然后我转向一个小程序，发现这个小程序的编译方式是Vue。 。 。 尤其是组件的编译方法。 。 。
虽然，清除 Vue 有点困难。 事实上，这个时代是数据操作的时代，而不是DOM操作的时代。
最后，我认为你不应该坚持使用后端框架。 虽然以后会有更多的中间框架，但是JS仍然是最好的。 我真的想不出在这个框架中还有什么可以玩的。 其实es会逐渐参考那些框架，后面就变成这个样子了。 就像，当你想到 JS 时，你可以编写类来继承吗？ 当我第一次听到它时，我以为是Java。 。 。 但现在我支持它。 。 。
那么为什么不专注于前端呢？ 所有节点都熟练吗？ 你认识迪诺吗？ PHP 启动了吗？ 蜥蜴呢？ 我相信那些语言以后会逐渐出现在后端知识点中（虽然PHP已经出现了，但是我觉得太多了。听说好的PHP是世界上最好的语言.. .)
Vue被淘汰了吗？
vuecreate是vue-cli3的初始化方法。 10.当前模板是固定的，模板选项可以自由配置。 创建的项目是vue-cli3，与cue-cli2的项目结构不同，配置方法也不同。 具体配置方法请参考官网链接。 vueinit是vue-cli2的初始化方法。 GitHub 中的一些模板可用于初始化项目。 Webpack是官方推荐的标准模板名称。 迁移 vue-cli2。 将 3.x 项目升级到 3.10 即可，只需将 static 目录复制到 public 目录即可，旧项目的 src 目录会覆盖 3.x 的 src 目录（如果更改配置vue webpack配置，可以查看文档和使用cli3进行配置）
vue一定要用webpack吗？ 后台登录的完整流程。 npm 和 cnpm 的区别
