Vite+React+TypeScript项目Lighthouse未使用JS提示问题咨询

这个文件是什么？ #

这是Vite生产构建生成的主入口chunk文件：

• 文件名里的随机字符串是Vite的内容哈希（content hash），作用是缓存控制——文件内容不变时哈希值固定，浏览器会复用本地缓存；内容更新时哈希变化，强制浏览器拉取最新版本。
• 文件包含你的React+TS项目核心业务代码、React核心库代码，以及React的版权注释，是页面运行的必需文件。Lighthouse标记它“未使用”，大概率是检测逻辑偏差导致：比如静态分析没识别到动态执行的代码（如路由懒加载触发的逻辑），或者代码在Lighthouse的检测周期结束后才被执行。

优化方案（避免影响性能） #

1. 代码分割与懒加载 #

拆分非首屏必需的代码，减小主chunk体积：

• 用React.lazy+Suspense实现路由/组件懒加载：

  const Home = React.lazy(() => import('./pages/Home'));
  const About = React.lazy(() => import('./pages/About'));
  
  function App() {
    return (
      <Suspense fallback={<div>加载中...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    );
  }
  

• 第三方库按需引入：比如UI组件库开启按需加载，配合Vite的optimizeDeps配置预构建按需引入的模块，避免把整个库打包进主chunk。

2. 清理冗余代码与注释 #

在Vite配置里开启生产环境压缩，移除不必要的注释和调试代码：

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
      format: {
        comments: false, // 移除所有注释（包括版权注释）
      },
    },
  },
});

如果需要保留特定版权注释，可调整comments规则为自定义函数，只保留符合要求的注释。

3. 提升Lighthouse检测准确性 #

• 模拟真实用户流程：Lighthouse默认静态爬取首屏，如果代码需要用户交互才执行，可在检测时选择“模拟用户交互”，或手动录制操作流程后再检测，让Lighthouse识别到更多实际使用的代码。
• 开启严格摇树优化：在Vite配置里开启Rollup的严格摇树，移除未使用的代码：

  // vite.config.ts
  export default defineConfig({
    build: {
      rollupOptions: {
        treeshake: 'strict',
      },
    },
  });
  

4. 预加载/预获取优化 #

• 主chunk预加载：Vite默认会为入口chunk生成预加载标签，确保浏览器优先加载必需代码；也可通过build.rollupOptions.output自定义chunk拆分规则，配合预加载逻辑。
• 后续路由chunk预获取：在空闲时预加载用户可能访问的路由chunk，提升跳转体验。

内容的提问来源于stack exchange，提问作者florian dollani