React项目构建后JS文件报错及部署后404、移动端异常问题求助

1. 构建后JS文件的错误提示处理 #

i) Tokenization跳过提示 #

这是编辑器（如VS Code）的性能提示，并非代码本身错误。构建后的JS文件是压缩合并的超长单行，编辑器默认限制了tokenization的行长度。

• 无需修改代码，若想消除提示：在编辑器设置中把editor.maxTokenizationLineLength设为更大值（比如100000），或者直接忽略该提示（毕竟构建产物不需要手动编辑）。

ii) "Expected an assignment or function call..."错误 #

这是ESLint的no-unused-expressions规则触发的错误，本地开发可能未启用严格检查，或构建环境的ESLint配置更严格。

• 排查代码：找出所有未被使用的表达式（比如单独写condition && someFunc()却不需要返回值、多余的表达式语句），改为赋值语句或函数调用；
• 调整ESLint配置：在.eslintrc中修改规则，比如针对特定场景禁用：

  {
    "rules": {
      "no-unused-expressions": ["error", { "allowShortCircuit": true }]
    }
  }
  

• 若使用Create React App，检查package.json中的eslintConfig，确保开发和构建环境的规则一致。

2. DreamHost部署后刷新404 #

这是React单页应用（SPA）的路由特性导致的：刷新时服务器会尝试请求对应路径的文件，但SPA只有index.html一个入口文件。

• 在项目根目录创建.htaccess文件，添加以下规则：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

  该规则会将所有非文件/非目录的请求转发到index.html，由React Router处理路由。

3. 移动端卡顿与404问题 #

卡顿通常是性能问题引发的连锁反应，进而导致路由异常触发404：

• 优化性能：
  • 用React.memo包裹频繁重渲染的组件，减少不必要的更新；
  • 用React.lazy和Suspense懒加载路由组件，避免初始加载过多代码；
  • 优化图片资源（使用srcset适配不同屏幕、压缩图片、改用WebP格式）；
  • 避免在scroll事件中执行大量计算，使用节流/防抖函数控制执行频率；
  • 检查内存泄漏：确保定时器、事件监听在组件卸载时清除。
• 路由模式调整：若使用history模式仍有异常，可暂时切换为hash模式（路由路径带#），无需服务器额外配置即可避免刷新404。

内容的提问来源于stack exchange，提问作者Maryam Rasheed