核心是先看清再动手，用webpack-bundle-analyzer可视化分析体积构成，精准定位node_modules第三方库、未拆分业务组件等“体积大户”，再通过tree shaking、splitchunks、动态导入、压缩缓存等手段系统优化。
Webpack 打包体积分析和性能优化，核心是“先看清、再动手”。不分析就瞎优化，就像没体检就吃药——可能治不对症，甚至越减越胖。
用 webpack-bundle-analyzer 看清体积构成
这是最直接有效的第一步。它把打包结果可视化成依赖图谱，一眼就能识别“体积大户”。
- 安装插件：
npm install --save-dev webpack-bundle-analyzer - 在 webpack 配置的
plugins中加入：const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');<br>plugins: [new BundleAnalyzerPlugin({ analyzerMode: 'static' })] - 运行
npm run build后，会自动生成report.html，打开即可查看 Treemap 或 Sunburst 图——面积越大的矩形/扇区，对应模块体积越大 - 重点关注：node_modules 中的第三方库（如 moment、lodash、echarts）、未拆分的业务组件、重复引入的 polyfill 或样式文件
精准剔除无用代码：Tree Shaking + sideEffects
Webpack 默认在 production 模式下启用 Tree Shaking，但要真正生效，得满足两个硬性条件。
- 代码必须使用 ES Module（
import/export），不能用require；比如用import { debounce } from 'lodash-es'，而不是const _ = require('lodash') - 在
package.json中声明sideEffects，告诉 Webpack 哪些文件“有副作用”，不能被摇掉："sideEffects": [<br> "*.css",<br> "*.scss",<br> "./src/polyfill.js"<br>]
- 注意：若项目用了 babel，建议配合
babel-plugin-lodash，自动将lodash-es的导入转为按需引用，进一步压缩体积
合理分包：SplitChunks + 动态导入
避免把所有代码塞进一个 main.js，通过拆包让浏览器只加载当前需要的部分。
- 配置
optimization.splitChunks提取公共模块和第三方库：splitChunks: {<br> chunks: 'all',<br> cacheGroups: {<br> vendors: { test: /[\/]node_modules[\/]/, name: 'vendors', priority: 10 },<br> common: { name: 'common', minChunks: 2 }<br> }<br>} - 对非首屏组件或工具类模块，改用动态
import()：// 路由级懒加载<br>const Home = () => import('./views/Home.vue');<br>// 工具函数按需加载<br>button.addEventListener('click', async () => {<br> const { format } = await import('./utils/format');<br> console.log(format('date'));<br>});
压缩与缓存：提速又瘦身
构建过程本身也能优化，让开发更顺、上线更快。
- 开启 Webpack 5 内置持久化缓存：
cache: { type: 'filesystem' }，下次构建跳过已编译模块 - 给耗时 loader（如 babel-loader）加缓存和多线程：
{<br> test: /.js$/,<br> use: ['cache-loader', 'thread-loader', 'babel-loader']<br>} - 确保构建模式为
mode: 'production'，自动启用 Terser 压缩、Scope Hoisting、Dead Code Elimination 等关键优化
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
