React---性能优化使用lazy进行组件懒加载通过组件懒加载可以将代码分割成更小的块，只有在需要时才会被加载。减少

使用lazy进行组件懒加载

通过组件懒加载可以将代码分割成更小的块，只有在需要时才会被加载。减少页面响应延迟

import {lazy,Suspense} from 'react'
import Layout from '../pages/Layout'
const Home = lazy(()=>import('@/pages/Home'))

const router = createBrowserRouter([
  {
   path:'/',
   element:(<AuthRoute><Layout/></AuthRoute>),
   children:[
     {
       index:true,
       element:(<Suspense><Home/></Suspense)
     }
   ]
  }
])

虚拟列表

仅渲染可见区域的dom元素

资源的优化

CDN优化

对于体积较大的非业务JS文件，比如react、react-dom，使用CDN进行优化

// craco.config.js文件

const path = require("path")
const {whenProd,getPlugin,pluginByName} = require('@craco/craco')
module.exports = {
    webpack: {
        alias: {
            "@": path.resolve(__dirname, "src"),
        },
        //配置CDN
        configure:(webpackConfig)=>{
         let cdn
          whenProd(()=>{
           webpackConfig.externals = {
            react:'React',
            'react-dom':'ReactDOM'
           }
           // 配置县城的cdn资源地址
           cdn = {
             js:[
              'https://cdnjs.cloudflare.com/jax/libs/react/18.1.0',
              'https://cdnjs.cloudflare.com/jax/libs/react-dom/18.1.0'
             ]
           }
          })
          // 通过htmlwebpackPlugin插件在public/index.html注入cdn资源URL
          const {isFound,match} = getPlugin(
            webpackConfig,
            pluginByName('HtmlWebpackPlugin')
          )
          if(isFound){
           //找到htmlWebpackPlugin插件
           match.userOptions.cdn = cdn
          }
          return webpackConfig
        }

},

}

public/index.html文件
<body>
 <div id="root"></div>
 //加载第三方发包的CDN链接
 <% htmlWebpackPlugin.options.cdn.js.forEach(cdnURL =>{%>
 <script src="<%=cdnURL%>"></script>
 <%})%>
</body>