优化webpack打包体积思路
Webpack 打包过大的问题通常会导致页面加载变慢，影响用户体验。可以从代码优化、依赖优化、构建优化等多个角度入手来减少打包体积：
- 代码优化
（1）按需加载（代码拆分）
① 路由懒加载
如果你的项目使用 Vue Router，可以使用动态 import() 进行路由懒加载：
const Home = () => import(’@/views/Home.vue’);
const About = () => import(’@/views/About.vue’);
const routes = [
{ path: ‘/’, component: Home },
{ path: ‘/about’, component: About },
];
这样只会在需要时加载对应的页面，而不是一次性加载所有路由组件。
② 组件懒加载
import { defineAsyncComponent } from ‘vue’;
const AsyncComponent = defineAsyncComponent(() =>
import(’@/components/HeavyComponent.vue’)
);
Vue 3 提供了 defineAsyncComponent，可以按需加载组件，避免一次性加载所有组件。
③ 动态导入依赖
对于某些不常用的库，可以在使用时动态 import()，而不是一开始就加载：
button.addEventListener(‘click’, async () => {
const { heavyFunction } = await import(’@/utils/heavyModule’);
heavyFunction();
});
这样不会在初始打包时包含该模块，而是等用户需要时才加载。
- 依赖优化
（1）移除不必要的依赖
可以用 webpack-bundle-analyzer 查看打包体积：
npm install -D webpack-bundle-analyzer
然后在 vue.config.js 或 webpack.config.js 中添加：
const BundleAnalyzerPlugin = require(‘webpack-bundle-analyzer’).BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
],
};
运行 npm run build 后，会生成一个可视化报告，看看哪些库太大，可以考虑替换或删除。
（2）使用更轻量的库
Lodash 替换方案：
Tree Shaking：使用 lodash-es 代替 lodash，并确保只导入需要的方法：
import { debounce } from ‘lodash-es’;
第三方替代：如 just-debounce、just-throttle 等。
Moment.js 替换方案：
Moment.js 很大，可以换成 dayjs：
npm install dayjs
import dayjs from ‘dayjs’;
console.log(dayjs().format());
Element Plus/Ant Design Vue 按需加载 如果使用 UI 组件库，不要全量引入，要改成按需引入：
import { Button } from ‘ant-design-vue’;
import ‘ant-design-vue/es/button/style’;
- 构建优化
（1）开启 Tree Shaking
确保 package.json 中 “sideEffects” 设为 false，让 Webpack 进行摇树优化：
{
“sideEffects”: false
}
如果某些模块有副作用（如样式文件），可以单独列出：
{
“sideEffects”: [".css", ".scss"]
}
（2）使用 ESBuild Loader 加速构建
ESBuild 比 Babel 更快，可以用来优化 TS/JS 解析：
npm install -D esbuild-loader
在 webpack.config.js 中：
module.exports = {
module: {
rules: [
{
test: /.ts$/,
loader: ‘esbuild-loader’,
options: {
loader: ‘ts’,
target: ‘esnext’,
},
},
],
},
};
（3）使用 Rspack 代替 Webpack
你已经有 Webpack 迁移到 Rspack 的经验，可以考虑直接用 Rspack，它的构建速度更快，尤其适用于 Vue 3 项目。
- 静态资源优化
（1）开启 Gzip/Brotli 压缩
开启 Gzip：
npm install compression-webpack-plugin -D
const CompressionPlugin = require(‘compression-webpack-plugin’);
module.exports = {
plugins: [
new CompressionPlugin({
algorithm: ‘gzip’,
test: /.(js|css|html|svg)$/,
}),
],
};
Brotli 压缩效果更好，可以用 brotli-webpack-plugin。
（2）图片优化
使用 WebP：比 PNG/JPEG 体积小，加载更快。
SVG 优化：使用 svgo 或 unplugin-icons 让 SVG 直接变 Vue 组件：
npm install -D unplugin-icons
import { OhVueIcon, addIcons } from ‘oh-vue-icons’;
import { BiGithub } from ‘oh-vue-icons/icons’;
addIcons(BiGithub);
- 缓存优化
（1）开启浏览器缓存
在 webpack.config.js 中：
output: {
filename: ‘[name].[contenthash:8].js’,
chunkFilename: ‘[name].[contenthash:8].js’,
}
这样文件名带 contenthash，只要内容不变，浏览器就会用缓存，不会重复下载。
（2）分离第三方库（Vendor Split）
可以用 Webpack splitChunks 把依赖拆分：
optimization: {
splitChunks: {
chunks: ‘all’,
cacheGroups: {
vendors: {
test: /[\/]node_modules[\/]/,
name: ‘vendors’,
chunks: ‘all’,
},
},
},
}
这样 node_modules 里的库会被打包成一个独立的 vendors.js，浏览器可以缓存它，不用每次都下载。
总结
如果 Webpack 打包特别大，可以从以下几方面优化： ✅ 按需加载（路由懒加载、组件懒加载、动态 import()）
✅ 移除大依赖（lodash → lodash-es，moment → dayjs）
✅ 启用 Tree Shaking（sideEffects: false）
✅ 用 ESBuild 加速编译
✅ 静态资源优化（图片压缩、Gzip/Brotli 压缩）
✅ 分离第三方库（splitChunks）
如果你的 Webpack 构建速度慢，考虑直接迁移到 Rspack，你之前已经做过类似的迁移，应该很容易上手！