webpack打包优化都有哪些
好问题 👍 webpack 打包优化可以从 构建速度 和 打包体积 两个方向入手。下面我帮你系统梳理一下：
🟦 一、构建速度优化（提升打包效率）
1. 缩小构建范围
合理使用
include/exclude{test: /\.js$/,loader: 'babel-loader',include: path.resolve(__dirname, 'src'),exclude: /node_modules/ }减少 resolve 范围
resolve: {extensions: ['.js', '.json'], // 不要写太多alias: { '@': path.resolve('src') } }
2. 缓存
持久化缓存 (webpack5 内置)
cache: {type: 'filesystem', }loader 层缓存
使用babel-loader的cacheDirectory: true
3. 多进程 / 并行
thread-loader：把耗时的 loader 交给 worker 线程。parallel-webpack/HappyPack（webpack5 推荐thread-loader）。
4. 预编译依赖（DLL）
webpack4 时代常用
DllPlugin，现在更推荐esbuild/swc做依赖预编译。
5. 开发环境优化
开发模式用
cheap-module-source-map，不要启用压缩。开启
HotModuleReplacementPlugin（HMR）。
🟦 二、打包体积优化（减少产物大小）
1. Tree Shaking
开启
mode: 'production'，配合 ES Module（import/export）。确保
package.json里的"sideEffects": false或者精确配置。
2. 代码分割（SplitChunks）
optimization.splitChunks提取公共依赖，避免重复打包。常见配置：
optimization: {splitChunks: {chunks: 'all',minSize: 20000,maxSize: 0,cacheGroups: {vendor: {test: /[\\/]node_modules[\\/]/,name: 'vendors',chunks: 'all'}}} }
3. 动态导入（懒加载）
用
import()语法做路由级别、组件级别的代码拆分。
4. 压缩优化
webpack5 内置
TerserWebpackPlugin做 JS 压缩，支持多进程。css-minimizer-webpack-plugin压缩 CSS。开启
image-minimizer-webpack-plugin压缩图片。
5. 资源优化
图片用
webp/avif。字体、SVG 使用
iconfont/svgo。
6. 外部依赖（externals）
常见库（如 React、Vue、lodash）可以通过 CDN 引入，避免打到 bundle 里。
7. 分包（多入口 / Micro Frontend）
大型项目可以拆成多个入口，甚至用 qiankun / module federation。
🟦 三、生产环境优化
开启压缩和去重
TerserPlugin移除无用代码、console.log。CssMinimizerPlugin压缩 CSS。
使用 CDN 加速静态资源
output.publicPath = 'https://cdn.xxx.com/'
懒加载 + 预加载
/* webpackPrefetch: true *//* webpackPreload: true */
分析工具
webpack-bundle-analyzer看看哪些包太大，有没有拆分空间。
🟦 四、替代方案（更快的工具链）
在 webpack 中嵌入 esbuild-loader / swc-loader，JS/TS 转译能快几十倍。
新项目可考虑 Vite、Rspack、Turbopack。
✅ 总结：
构建速度优化：缓存、多进程、减少搜索范围、开发环境精简。
打包体积优化：Tree Shaking、代码分割、懒加载、压缩、externals、分析工具。
生产环境优化：CDN、预加载、分析 bundle。