摘要：合理使用 mode开发环境：mode: "development"，默认不开启压缩，构建快。生产环境：mode: "production"，自动启用压缩、tree-shaking 等。开启缓存持久化缓存（Webpack 5 内置）：cache: { type:
Webpack 的优化点很多，可以分成 构建速度优化 和 打包体积优化 两大类。下面给你整理一份比较系统的清单：
减少打包时间，让开发体验更流畅。
合理使用 mode开发环境：mode: "development"，默认不开启压缩，构建快。生产环境：mode: "production"，自动启用压缩、tree-shaking 等。开启缓存持久化缓存（Webpack 5 内置）：cache: { type: "filesystem" }会把模块和构建结果缓存到硬盘，下次构建直接复用。多进程/多线程使用 thread-loader 或 parallel-webpack：{ loader: "thread-loader", options: { workers: 2 } }缩小构建范围配置 include / exclude，减少 babel-loader 等 loader 的处理范围。合理使用 resolve.modules、resolve.alias，避免层层查找。DLL / externals较老的方法：DllPlugin 提前打包不常改动的库。或者 externals 把第三方库（React、Vue）交给 CDN，不参与打包。增量构建使用 webpack-dev-server 的 HMR（热更新），只重新编译改动部分。减少产物大小，提升加载速度。
Tree-ShakingWebpack 2+ 内置，前提是：使用 ES Module (import/export)。sideEffects: false 或者指定有副作用的文件。配合 TerserPlugin 去除无用代码。代码分割（Code Splitting）使用 optimization.splitChunks 拆分公共依赖。动态 import，实现按需加载。压缩与优化JS 压缩：默认 TerserPlugin。CSS 压缩：css-minimizer-webpack-plugin。图片压缩：image-minimizer-webpack-plugin（或构建时用 tinypng）。减少 polyfill 体积按需引入 polyfill：core-js + @babel/preset-env + useBuiltIns: "usage"。Scope Hoisting（作用域提升）optimization.concatenateModules: true，减少函数包装。使用更小的依赖Lodash → lodash-es + babel-plugin-lodashMoment.js → dayjsantd → 按需加载 babel-plugin-import懒加载资源路由级代码分割。大图、视频采用延迟加载（react-lazyload，loading="lazy"）。开启 Gzip 或 Brotli使用 compression-webpack-plugin 生成 .gz / .br 文件，配合 Nginx。CDN 加速静态资源放到 CDN，减少服务器压力。长缓存优化output.filename: '[name].[contenthash].js'确保修改后才更新 hash，未修改的文件可走浏览器缓存。Preload / Prefetch提前加载关键资源：来源：州天看科技