页面渲染上线前怎样收口配置React 的开发构建包含额外的检查和警告因此生产发布前应确认构建命令、模式和产物都正确。但“页面卡顿”不能仅凭文件名归因还应查看 Source Map、网络加载、React Profiler 和真实设备上的交互记录。Vite 在生产构建中会设置相应的模式并让依赖选择生产入口。手动覆盖环境常量或修改 React DevTools 全局钩子通常不是必要步骤反而可能掩盖问题或造成兼容性风险。检查生产构建实际使用的模式React 包会根据打包器提供的条件选择开发或生产实现。若产物疑似包含开发代码应先确认实际执行的是vite build、依赖没有被错误 externalize并用构建可视化或 Source Map 检查引入链路。不要假定每个项目都要显式定义process.env.NODE_ENV。下面的配置只保留与产物目标、Source Map 和拆包有关的示例项插件和 Vite 本身负责生产模式下的条件替换。// vite.config.ts import { defineConfig } from vite; import react from vitejs/plugin-react; import path from path; export default defineConfig(({ mode }) { const isProduction mode production; return { plugins: [ react({ // 在生产环境关闭 Babel 的 jsxSelf 与 jsxSource 插件省去 DOM 挂载源码行号 jsxImportSource: react, babel: { plugins: isProduction ? [babel/plugin-transform-react-constant-elements] : [], }, }), ], build: { target: es2015, outDir: dist, minify: esbuild, // 生产环境使用 esbuild 极速压缩 sourcemap: isProduction ? hidden : false, // 是否上传 Source Map 取决于错误监控配置 cssCodeSplit: true, rollupOptions: { output: { // 精细化隔离 React 核心依赖与业务代码 manualChunks(id) { if (id.includes(node_modules/react/) || id.includes(node_modules/react-dom/)) { return react-vendor; } }, compact: true, }, }, // 触发超大 Chunk 警告 chunkSizeWarningLimit: 600, }, }; });用构建产物和运行时数据做验证运行时不建议依赖 React 私有字段判断构建类型也不应通过改写 DevTools 钩子来“保护”应用。发布流水线可保存构建元数据、检查产物大小和 Source Map再在灰度环境复测关键交互。下面的入口包装仅说明如何按环境保留开发期检查StrictMode在生产构建中不会触发开发期的额外检查不必为了性能专门移除它。// react-production-guard.ts import React from react; export function createRootElement(RootComponent: React.ComponentType): React.ReactNode { return import.meta.env.DEV ? React.createElement(React.StrictMode, null, React.createElement(RootComponent)) : React.createElement(RootComponent); }发布前的三个检查项第一构建脚本要明确。常见配置是使用vite build若使用自定义 mode应确认其不会覆盖生产构建所需的环境设置。第二在开发期保留StrictMode来发现副作用问题。生产构建没有其开发期的重复检查性能问题应从实际渲染和资源加载入手。第三持续比较同一构建配置下的产物变化。react-vendor的大小会受 React 版本、压缩器、拆包方式和附带依赖影响异常增长应触发排查而不是只按固定 KB 数判定。