webpack性能优化方式之dll---webpack.dll.config.js

最新推荐文章于 2025-04-01 21:26:22 发布

xiao xu

最新推荐文章于 2025-04-01 21:26:22 发布

阅读量1w

点赞数

分类专栏： webpack 文章标签： webpack性能优化 webpack.dll.config.js dll优化方式优化webpack

本文链接：https://blog.youkuaiyun.com/weixin_42420703/article/details/81950946

版权

本文探讨了在webpack构建速度缓慢时，为何需要性能优化，重点介绍了DLL优化方式。通过创建webpack.dll.config.js文件，将不常更新的第三方库如react分离打包，以提高构建效率。执行webpack --config webpack.dll.config.js后，生成manifest.json和dll.js，前者记录模块ID，后者是静态资源包。此外，BundleAnalyzerPlugin用于分析打包文件，提供可视化报告。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

为什么需要优化

相信使用过webpack的童鞋应该有体会到，在文件相对较庞大时，webpack的构建速度是非常慢的，那这样的话对我们的开发人员来说体验非常不好。

优化的方式

性能优化方式有很多，这里来介绍一下dll，dll是一种最简单粗暴并且极其有效的优化方式，且我的公司项目也是用的这种方式。

如何使用dll优化

在用 Webpack 打包的时候，对于一些不经常更新的第三方库，比如 react，lodash，我们希望能和自己的代码分离开。

对于这种方式优化的项目，一般有两个配置文件，分别是：

- webpack.config.js
- webpack.dll.config.js

webpack.config.js配置这里就不多说了，可以参照我的博客：
https://blog.youkuaiyun.com/weixin_42420703/article/details/81950946
下面以我的公司项目的webpack.dll.config.js为例：

const path = require("path");
const webpack = require("webpack");
const {
  BundleAnalyzerPlugin
} = require('webpack-bun

最低0.47元/天解锁文章