如何移除未使用JavaScript以提升React页面加载评分

我的网站是winions.gg（基于React构建），Google Lighthouse提示我需要移除未使用的JavaScript来加快页面加载速度。我不确定从何入手，因为我认为所有JavaScript都在被使用。我是否需要延迟加载某些内容？该如何实现？

App.js

import React from "react";
import './style.css'

//Routing
import { BrowserRouter as Router , Routes, Route} from "react-router-dom"

import Header from "./Components/Layout/Header";
import Footer from "./Components/Layout/Footer";
import HomePage from "./Components/Home/HomePage";
import ProfilePage from "./Components/Profile/ProfilePage";
import AllArticles from "./Components/AllArticles/AllArticles";
import Pricing from "./Components/Pricing/Pricing";

const App = () => (
    <Router>
      <Header/>
      <Routes>
        <Route exact path = '/' element={<Pricing/>}/>
        {/* <Route exact path = '/profile' element={<ProfilePage/>}/>
        <Route exact path = '/player/:playerRegion/:playerName' element={<ProfilePage/>}/>
        <Route exact path = '/allarticles' element={<AllArticles/>}/>
        <Route exact path = '/old-homepage' element ={<HomePage/>}/> */}
      </Routes>
      <Footer/>
    </Router>
  );

export default App

Index.js

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

补充说明：我认为自己使用的是webpack，bundle.js无疑是最大的文件。

优化方案 #

一、先清理明确未使用的代码 #

看你的App.js，目前注释掉了多个路由组件，但依然在顶部import了这些组件，webpack打包时会把它们强行塞进bundle里，这就是典型的未使用JS。直接把这些没用到的import语句删掉，能立刻减小bundle体积。

二、用工具定位隐藏的冗余代码 #

用webpack-bundle-analyzer可视化分析bundle结构，精准找到体积大的冗余模块：

1. 安装依赖：

   npm install --save-dev webpack-bundle-analyzer
   

2. 在webpack配置文件中添加插件：

   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
   module.exports = {
     // ...其他已有配置
     plugins: [
       new BundleAnalyzerPlugin()
     ]
   }
   

3. 运行打包命令，会自动打开本地页面展示bundle内的模块占比，直观看到哪些模块冗余、体积超标。

三、路由级代码分割（延迟加载） #

即使是正在使用的路由组件，也不需要初始加载时全部打包，只在用户访问对应路由时再加载，能大幅降低初始bundle体积。用React的lazy和Suspense实现：

修改后的App.js：

import React, { lazy, Suspense } from "react";
import './style.css'

//Routing
import { BrowserRouter as Router , Routes, Route} from "react-router-dom"

import Header from "./Components/Layout/Header";
import Footer from "./Components/Layout/Footer";

// 替换直接import为lazy按需加载
const Pricing = lazy(() => import("./Components/Pricing/Pricing"));
// 后续启用其他路由时，同样用lazy加载
const ProfilePage = lazy(() => import("./Components/Profile/ProfilePage"));
const AllArticles = lazy(() => import("./Components/AllArticles/AllArticles"));
const HomePage = lazy(() => import("./Components/Home/HomePage"));

const App = () => (
    <Router>
      <Header/>
      {/* 用Suspense包裹路由，加载过程中显示占位内容 */}
      <Suspense fallback={<div>加载中...</div>}>
        <Routes>
          <Route exact path = '/' element={<Pricing/>}/>
          {/* <Route exact path = '/profile' element={<ProfilePage/>}/>
          <Route exact path = '/player/:playerRegion/:playerName' element={<ProfilePage/>}/>
          <Route exact path = '/allarticles' element={<AllArticles/>}/>
          <Route exact path = '/old-homepage' element ={<HomePage/>}/> */}
        </Routes>
      </Suspense>
      <Footer/>
    </Router>
  );

export default App

四、其他辅助优化 #

• 确保生产环境打包：用npm run build（create-react-app默认命令）打包生产版本，会自动开启tree shaking、代码压缩、无用代码剔除等优化，比开发环境bundle体积小很多。
• 清理冗余依赖：检查package.json里有没有没用到的第三方包，直接卸载删除；同时清理项目中未使用的CSS文件和代码片段。

内容的提问来源于stack exchange，提问作者NFeruch - FreePalestine