我要招人

前端/移动开发面试题更新 2026-08-05

在构建 React 项目时，我们借助 Webpack 进行打包，最终输出的 JavaScript 文件体积偏大，请问从哪些方面入手可以显著减小产物大小？

前端/移动开发性能优化问题拆解ReactWebpack

考察说明

考查对前端性能优化和 Webpack 打包优化的理解与实践能力。

回答思路

  1. 【回答框架 1】首先进行代码层面的优化：使用 Tree Shaking 去除未使用的代码，要求使用 ES Module 语法，并确保 sideEffects 字段配置正确；同时进行代码分割，通过动态 import 或 splitChunks 将公共依赖、路由组件等拆分成独立 chunk，实现按需加载。
  2. 【回答框架 2】其次压缩代码：生产环境使用 TerserWebpackPlugin 开启多进程压缩，还可以使用 CssMinimizerPlugin 压缩 CSS；对于图片等资源，设置合适的 limit 阈值，小图转 base64，大图使用压缩插件如 image-webpack-loader。
  3. 【回答框架 3】最后利用 CDN 和缓存：将不常变动的库（如 react、react-dom）通过 externals 配置排除出打包，改用 CDN 引入；同时为文件名添加 hash 指纹，实现长效缓存。
  4. 【回答框架 4】另外可以引入 BundleAnalyzerPlugin 分析包体积，针对占比过大的模块进行专项优化，例如使用按需加载的库版本（如 lodash-es）或替换为更轻量的库。
  5. 【关键点 1】Tree Shaking 和代码分割是减少体积的核心手段。
  6. 【关键点 2】压缩包括 JS 和 CSS 的压缩，以及图片资源的优化。
  7. 【关键点 3】利用 externals 和 CDN 减少重复打包和请求压力。
  8. 【关键点 4】使用 Bundle Analyzer 定位体积瓶颈。
  9. 【易错点 1】代码分割可能增加 HTTP 请求数，需权衡首屏加载速度。
  10. 【易错点 2】Tree Shaking 需要配合 ES Module 和 sideEffects 配置，否则可能失效。
  11. 【易错点 3】图片转 base64 会增大 JS 体积，需控制阈值。