React 工具和库面试题, 使用 Webpack 打包 React 项目时,如何减小生成的 JavaScript 文件大小?
React 工具和库面试题, 使用 Webpack 打包 React 项目时,如何减小生成的 JavaScript 文件大小?
QA
Step 1
Q:: 在使用 Webpack 打包 React 项目时，如何减小生成的 JavaScript 文件大小？
A:: 为了减小生成的 JavaScript 文件大小，可以采取以下措施：1) 使用 mode: 'production'，Webpack 会自动执行诸如代码压缩、移除未使用代码等优化操作；2) 通过 splitChunks 配置将第三方库（如 React、Lodash）分离到单独的 chunk 中，减少主应用包的大小；3) 使用 Tree Shaking 技术移除未引用的模块代码；4) 使用 babel-loader 时启用 @babel/preset-env 中的 useBuiltIns: 'usage' 和 corejs 选项，来减少 polyfill 的体积；5) 启用 gzip 或 brotli 压缩来进一步减小文件大小。
Step 2
Q:: 如何使用 Tree Shaking 来优化 Webpack 打包？
A:: Tree Shaking 是一种在 JavaScript 环境中通过消除未使用的代码（即“死代码”）来减小打包体积的技术。Webpack 默认支持 Tree Shaking，但要求使用 ES6 模块语法。可以通过在 Babel 配置中确保 modules: false 来保持 ES6 模块形式，避免 Babel 将其转换为 CommonJS，确保 Tree Shaking 的正常运行。
Step 3
Q:: 如何配置 Webpack 的 SplitChunks 来优化代码分离？
A:: 可以通过在 optimization.splitChunks 配置中启用代码分离。可以配置 chunks: 'all'，将同步和异步模块都分割出来，或设置 minSize``, maxSize 等来控制分块的大小。此外，可以为第三方库单独配置，例如将 node_modules 下的模块分割到一个单独的 vendor chunk 中，这样可以减少应用主代码的体积。
Step 4
Q:: 如何在 React 项目中实现按需加载？
A:: React 支持按需加载，通过使用 React.lazy() 和 Suspense 组件可以轻松实现。这种方法可以将不同页面或组件的代码分割到不同的文件中，只有在需要时才加载，从而减少初始加载时间。结合 Webpack 的动态 import() 语法，可以进一步优化这一过程。