webpack.DllPlugin和webpack.DllReferencePlugin静态资源预编译插件

最新推荐文章于 2025-10-30 16:57:12 发布

原创

最新推荐文章于 2025-10-30 16:57:12 发布 · 8.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#DllPlugin #webpack #静态资源预编译

本文介绍了webpack的DllPlugin和DllReferencePlugin，用于预编译第三方NPM包，提高项目启动和开发时的编译速度。通过创建webpack.dll.config.js，配置DllReferencePlugin，并在index.html引入dll.js，然后在package.json添加预编译指令，即可实现。虽然依赖更新需要手动运行dll，但可以通过autodll-webpack-plugin自动化处理，不过该插件在webpack 4+中存在兼容问题。

现在因为有HMR局部热更新，所以dllPlugin这两个插件用得少了，不过还是记录一下配置方法，可能以后会再次使用。
这两个插件可以对第三方NPM包预编译，生成*.dll.js，在项目启动和开发中不停的反复Ctrl+S的时候，webpack就不需要每次都重新编译那些固定不变的NPM包了，大大提升编译速度。

1.

新建一个webpack.dll.config.js ：
(我是创建在根目录下的)

const path = require("path");
const webpack = require("webpack");
const pkg = require('./package.json'); // 引入package.json
module.exports = {
    entry: {
        vendor: Object.keys(pkg.dependencies) // 遍历package.json的所有依赖包
    },
    output: {
        path: path.join(