在开发前端项目时，样式、js 代码的体积越来越大，构建时间也越来越长，这给开发者带来很大的困扰。Webpack 是当前前端构建领域最流行的工具之一，它有很多优秀的插件和功能，其中，使用 dll 动态链接库可以有效地提升项目构建效率。
webpack 的原理
在 webpack 构建过程中，会遍历项目需要构建的文件，解析代码，将所有引入的模块打包成一个或多个 JS 文件，用户通过 script 标签引入这些文件，再触发它们的执行。如此，浏览器便可以正确地呈现页面。
dll 动态链接库的原理
在 dll 动态链接库的使用中，我们先把一些不常变化的第三方包（如 React、jQuery）编译成一个或多个 js 文件，并将它们打包成 dll 动态链接库。然后在项目构建时，不再把这些第三方包重新编译，而是直接调用 dll 中已经编译好的代码。这样，构建时间便能大大缩短。
如何使用 dll 动态链接库
以下是 webpack 的配置文件 webpack.config.js 的部分代码，在 plugins 中配置了 DllPlugin：
const path = require('path');
const {DllPlugin} = require('webpack');
module.exports = {
entry: {
vendor: [
'react',
'react-dom',
'react-router-dom',
'redux',
'react-redux',
'axios',
] //指定需要打包的库
},
output: {
filename: '[name].[contenthash:8].dll.js',
path: path.resolve(__dirname, 'dll'),
library: '[name]_[contenthash:8]'
},
plugins: [
new DllPlugin({
name: '[name]_[contenthash:8]',
path: path.resolve(__dirname, 'dll/[name].manifest.json')
})
]
};entry：配置需要打包的库，在这里我们配置了 React、React-Dom、React-Router-Dom、Redux、React-Redux 和 Axios。
output：指定打包文件的名称、路径以及将打包好的名称挂载到全局变量上。例如设置 library: '[name]_[contenthash:8]'，生成的全局对象名为 vendor_xxxx。
DllPlugin：指定打包出文件的路径以及打包好的文件路径的映射关系。
生成 dll 动态链接库后，需要在应用的入口 index.html 中引入 dll 文件：
<body> <div id="root"></div> <script src="./dll/vendor.fc6a3fdb.dll.js"></script> <script src="./index.bundle.js"></script> </body>
在 webpack 的配置文件中，我们需要引入 DllReferencePlugin：
const path = require('path');
const {DllReferencePlugin} = require('webpack');
module.exports = {
plugins: [
new DllReferencePlugin({
manifest: path.resolve(__dirname, 'dll/vendor.manifest.json')
})
]
};DllReferencePlugin：指定读取 dll 中打包好的文件的映射关系，以确保我们的应用在构建时不会重新打包 dll 中已经有的代码。
总结
使用 dll 动态链接库是优化 webpack 构建时间的一种简单有效的方法。通过将不常变化的第三方包打包成 dll ，webpack 在构建代码时不再需要重新编译这些包，从而大大加快了构建时间。在实际项目开发中，可以根据需要选择打包哪些库，从而达到最优化的效果。
以上是本文介绍的 dll 动态链接库，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a2ec15add4f0e0ffb01a66