React首页加载速度优化小结

"editor.codeActionsOnSave": { "source.organizeImports": true },

# 安装
npm install -g depcheck
# 安装完成后输入该命令查看为使用的包
depcheck
# 对于不需要的包，使用以下命令删除
npm uninstall xxx

// 加载环境变量
require('../config/env')

# 该变量用于控制让 npm run build 是否会生成map文件，为false则不生产，true则生成
GENERATE_SOURCEMAP = false

// 这是我TerserPlugin打包的相关配置，在optimization下进行配置
new TerserPlugin({
          parallel: true,	// 并行打包，打包加速
          extractComments: false,	// 删掉注释，若为true，表示会将注释抽取到一个单独的文件中
          terserOptions: {
            parse: {
              ecma: 8,
            },
            compress: {
              ecma: 5,
              warnings: false,
              comparisons: false,
              inline: 2,
            },
            toplevel: true, 
            mangle: true,	
            keep_classnames: false,
            keep_fnames: false,
            output: {
              ecma: 5,
              comments: false,
              ascii_only: true,
            },
          },
        }),

optimization: {
    splitChunks: {
      chunks: 'initial',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },

// 路由懒加载demo
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./routes/Home'));
const TestPage= lazy(() => import('./routes/TestPage'));

const App = () => (	
      <BrowserRouter>
         <Router>
    		<Suspense fallback={<div>Loading...</div>}>
      			<Routes>
        			<Route exact path="/" component={Home}/>
        			<Route path="/testPage" component={TestPage}/>
      			</Routes>
    		</Suspense>
  		</Router> 
      </BrowserRouter>
)

# 函数部分
const lazyComponent = (element) => {
        return (
            <Suspense fallback={<p>loading...</p>}>
                {element}
            </Suspense>
        )
    }
# ----------------------------------------------------------------------------
# return的ReactNode部分
<Route element={<StuLayout />}>
      <Route path='/StuIndex' index element={lazyComponent(<StuIndex />)} />
      <Route path='/StuIndex/ViewAnn' element={lazyComponent(<ViewAnn />)} />
</Route>