在 Linux 环境下使用 Webpack 进行打包优化，核心目标无非两点：显著缩减构建体积，并制定精细的分包策略。毕竟，谁都不愿看到首屏加载缓慢、缓存频繁失效、第三方库被重复打包等糟糕体验。本文就来探讨如何通过 Codex Webpack 实现这些优化——简单来说，就是一套从配置到落地的完整解决方案。
先提出几个核心观点：不少前端开发者在进行优化时，往往只关注某个特定插件，却忽视了 Webpack 自带的基础配置开关。实际上，大多数构建体积膨胀的问题，根源都在于这些基础配置没有正确开启。接下来，我们将从几个关键环节逐一剖析。
启用生产模式与基础体积压缩
Webpack 5 及以上版本在生产模式（production）下，默认会开启 Tree Shaking、Scope Hoisting 以及代码压缩——这相当于系统赠送的优化福利。但前提是你必须在 webpack.config.js 中明确指定 mode: 'production'。别看这很简单，实际项目中不少人忘记设置，或者为了调试方便一直使用 development 模式，结果打包体积直接膨胀 3～5 倍。
修改起来仅需一行：
module.exports = { mode: 'production' };
需要特别注意的是：如果 mode 未设置或被设为 'development'，Terser 不会工作、死代码不会被剔除、哈希也无法正常生成。因此，这是优化的第一步，也是性价比最高的一步。
精准启用 Tree Shaking
Tree Shaking 并非开箱即用的功能——它有三个硬性前提，缺一不可：
① 项目中所有 JS 必须使用 ES6 的 import/export 语法。CommonJS 的 require 无法被摇树，这一点没有商量余地。
② package.json 中需要声明 "sideEffects": false，或者精确列出具有副作用的文件，例如 ["*.css", "*.scss"]。这个字段告诉 Webpack 哪些模块可以安全地删除未使用的导出。
③ Babel 配置中不能将模块语法转换为 CommonJS。你需要在 .babelrc 或 babel.config.js 中移除 @babel/preset-env 的 modules: 'commonjs' 选项，或显式设置为 modules: false。
这三个条件遗漏任意一个，比如你明明按需引入了 import map from 'lodash/map'，结果整个 lodash 还是被打包进来，体积多出 60KB 以上，那就得不偿失了。
自动化提取公共依赖（SplitChunksPlugin）
公共依赖的提取是减少重复打包的关键环节。根据不同的业务场景，有三种典型的配置思路：
通用基础配置（适用于绝大多数中后台项目）
在 optimization.splitChunks 下启用 chunks: 'all'，设置 minSize: 30000（30KB）。这样，任何被引用超过 2 次且体积超过 30KB 的模块，都会被自动抽取为 vendor.bundle.js。简单直接，足以应对大部分场景。
精细化控制（适合大型单页应用）
使用 cacheGroups 将 node_modules 中的框架层（React/Vue）、工具层（Lodash/Axios）、UI 组件层（Ant Design/React Bootstrap）分别打包成独立的 chunk。每组需要指定 name、priority 和 test 正则。注意：priority（优先级）值越大越先匹配，必须错开层级，否则低优先级组会被高优先级组“截胡”，无法达到预期的分包效果。
强制分离特定库（比如 moment）
如果你还在使用 moment.js，这个库体积较大，最好让它独立成 chunk，便于单独缓存和调试。可以添加如下配置：
cacheGroups: { moment: { name: 'moment', test: /[\/]node_modules[\/](moment|moment-timezone)[\/]/, chunks: 'all', enforce: true } }
这样 moment 会被单独打包为 moment.[hash].js，不会混入 vendor 中。
动态导入实现路由级分包
路由级的异步加载是优化首屏加载的利器。操作分为三步：
第一步：将路由组件改为异步加载
以 React Router v6 为例，将 import Home from './pages/Home' 改为 const Home = React.lazy(() => import('./pages/Home'))，再用
第二步：为动态 import 添加 webpackChunkName 注释
像这样：import(/* webpackChunkName: "user-profile" */ './pages/UserProfile')。构建后会生成 user-profile.[hash].js，而不是默认的 1.[hash].js。命名清晰，便于在浏览器和监控工具中定位。
第三步：配合 SplitChunks 的 chunks: 'async' 模式
确保这些异步 chunk 不会被混入 vendor 中，保持加载路径干净。这样用户访问某个路由时，只加载对应的 chunk 和少量公共依赖，首屏加载速度会有质的提升。
剔除无用资源与语言包
开发过程中经常会有“顺手引入”的库，结果带进大量用不上的东西。例如 moment.js，默认会包含所有语言包，仅这些语言包就占用约 140KB。解决方法：安装 moment-locales-webpack-plugin 并配置 localesToKeep: ['zh-cn']，只保留你需要的语言包，体积立刻缩减。
对于 Lodash 这类工具库，可以采用按需导入写法（import debounce from 'lodash/debounce'），或者接入 babel-plugin-lodash 自动转换全量引用。这些小的改动累积起来效果显著。
图片资源方面，超过 10KB 的图片不建议内联为 base64，改用 file-loader 输出独立文件。在 url-loader 的 limit 选项中设为 10240（10KB）即可。
总而言之，Webpack 的优化是一项系统工程，以上每一步都环环相扣。从生产模式到摇树、分包、动态导入、资源瘦身，每个步骤都在为最终的构建质量和用户体验负责。如果完成上述配置后项目体积仍不理想，建议重新检查是否有遗漏的第三方依赖或多余的 polyfill。优化没有终点，但先把基础做扎实，70% 的问题便能迎刃而解。