React中的代码分割

代码分割想要解决的问题是：经打包工具📦生成的bundle文件过大，特别是在我们引入第三方库的情况下。

在React中，我们有一下几种解决方案：

1. 动态加载

// math.js
export function add(a, b) {
  return a + b
}

// 未使用动态加载
import { add } from './math.js'
console.log(add(10, 20))

// 使用动态加载
import("./math").then(math => {
  console.log(math.add(5, 16))
})

注：如果你使用create-react-app构建程序，则可以直接使用这种语法；如果你使用的是Webpack或者其他打包工具，则需要你按照相应参考文档进行相应配置。使用Babel时，需要babel-plugin-syntax-dynamic-import插件的帮助。

 

2. React.lazy

React.lazy方法可以让我们动态加载组件

// 未使用React.lazy
import OtherComponent from './OtherComponent'

// 使用React.lazy动态引用组件
const OtherComponent = React.lazy(() => import('./OtherComponent'))

配合使用Suspense组件（被它包括的组件或元素如果尚未加载，可以先渲染一些加载提示的内容）

const OtherComponent = React.lazy(() => import('./OtherComponent))

// 使用Suspense
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading . . .</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  )
}

注：React.lazy和Suspense在SSR中目前还不支持，如果需要在SSR中使用，则需要React Loadable插件的支持。

 

在route过程中使用React.lazy

页面切换和加载通常都需要些时间，所以这里适合使用React.lazy和Suspense的。

import React, { Suspense, lazy } from 'react
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

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

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading . . . </div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Suspense>
  </Router>
)

 

详细可参考原文地址：https://reactjs.org/docs/code-splitting.html