如何减小Bundle Size？求助优化过大打包体积的方法

• 代码层面优化

  • 按需引入第三方库：避免全量导入依赖，比如使用import { debounce } from 'lodash-es'代替import _ from 'lodash'；组件库可配合按需加载插件（如Element Plus的自动导入）减少冗余代码。
  • 开启Tree Shaking：确保打包工具（Webpack/Vite）启用该功能，避免使用import * as xxx这类会破坏Tree Shaking的写法，自动移除未被使用的代码。
  • 生产环境代码压缩：启用Terser进行代码混淆、移除注释与空格，Webpack和Vite默认生产环境已配置，也可根据需求自定义压缩规则。
  • 优先使用ES模块：确保项目依赖为ES模块格式，让Tree Shaking能更高效地工作。

• 资源文件优化

  • 图片压缩与格式升级：将JPG/PNG压缩至合理大小，或转换为WebP/AVIF等现代图片格式；用SVG替代简单图标，避免引入完整图标库。
  • 字体文件精简：仅引入项目实际使用的字符子集，可借助Fonttools工具提取所需字符，或使用Web字体的子集加载功能。
  • 静态资源CDN托管：将第三方库、图片等静态资源部署到CDN，既减少打包体积，又能提升资源加载速度。

• 打包工具配置优化

  • 代码拆分（Code Splitting）：通过Webpack的splitChunks或Vite的build.rollupOptions.output.manualChunks配置，拆分公共代码、第三方库，避免重复打包。
  • 排除外部依赖：若依赖已通过CDN引入，可在打包配置中用externals（Webpack）或build.rollupOptions.external（Vite）排除这些依赖，不将其打入包内。
  • 启用压缩格式：打包时生成Gzip或Brotli压缩文件，或在服务器端开启对应压缩，让浏览器加载更小的资源文件。

• 其他优化手段

  • 替换为轻量依赖：选择体积更小的替代库，比如用dayjs替代moment.js，axios替代体积较大的老牌请求库。
  • 路由组件懒加载：单页应用中对非首屏路由组件进行懒加载，比如Vue中const Home = () => import('./Home.vue')，React中React.lazy(() => import('./Home'))，降低初始加载包的体积。
  • 清理开发环境代码：生产打包时移除console.log、debugger等调试代码，以及仅在开发阶段使用的Mock数据、调试工具。

内容的提问来源于stack exchange，提问作者Kamran Ahmed Khan