在 React 项目中,如何确保构建出来的产物是经过优化、适合部署到生产环境的版本?请说明具体做法。
考察说明
考查对 React 生产构建流程的理解,包括构建命令、环境变量和优化机制。
回答思路
- 【回答框架 1】React 区分开发与生产构建。开发模式包含额外警告、检查与热更新,便于调试;生产模式会压缩代码、去除开发提示并启用优化。
- 【回答框架 2】构建时使用 npm run build 或 yarn build,默认执行 react-scripts build,该命令会设置 process.env.NODE_ENV 为 production,并调用 Webpack 进行压缩、tree-shaking 等处理。
- 【回答框架 3】除了构建命令,还可以通过设置环境变量 NODE_ENV=production 来强制生产模式;若从环境变量注入 NODE_ENV,框架会据此选择对应构建。
- 【回答框架 4】生产构建通常伴有代码分割、懒加载、资源指纹和缓存策略,这些由构建工具自动执行,但也可以通过配置进一步优化,例如使用 Webpack 的 SplitChunks。
- 【回答框架 5】无法通过编译器本身直接生成生产版本,而是通过构建工具链在编译时切换模式;最终产物是静态文件,需部署到服务器或 CDN。
- 【关键点 1】生产构建命令是 npm run build,会设置 NODE_ENV=production 并启用优化。
- 【关键点 2】构建时自动进行代码压缩、tree-shaking、去除开发警告和死代码。
- 【关键点 3】环境变量 NODE_ENV 是切换开发与生产模式的关键。
- 【关键点 4】生产构建还会生成资源指纹和代码分割,提升缓存效率。
- 【关键点 5】构建产物为静态文件,部署时不需 Node 服务也可运行。
- 【易错点 1】不要把 process.env.NODE_ENV 随便改成非 production 值,否则会失去优化。
- 【易错点 2】如果手动使用 webpack,需要专门配置 mode: production,否则默认是 development。
- 【易错点 3】生产构建不包含热更新,修改代码后需重新构建才能生效。