「跟着b站学React」代码分割

学习资源：

• 【前端面试八股文React篇】代码分割

知识

为什么要使用代码分割？

• 项目体积过大，导致页面加载时间过长。

代码分割方法？

方法一：使用import

// 使用前
import {add } from './math'
console.log(add(1,2));

// 使用后 在webpack中识别到后会进行代码分割
import('./math').then(math=>{
  const {add}=math;
  console.log(add(1,2));
})

方法二：React.lazy

import React,{Suspense} from 'react';
const OtherComponent=React.lazy(()=>import('./math'));

function TestComponent(){
  return(<div>
         	<Suspense fallback={<div>loading</div>}>
            <OtherComponent/>
           </Suspense>
         </div>)
}