代碼分割想要解決的問題是：經打包工具??生成的bundle文件過大，特別是在我們引入第三方庫的情況下。

在React中，我們有一下幾種解決方案：

1. 動態加載

 1 // math.js
 2 export function add(a, b) {
 3   return a + b
 4 }
 5 
 6 // 未使用動態加載
 7 import { add } from ‘./math.js‘
 8 console.log(add(10, 20))
 9 
10 // 使用動態加載
11 import("./math").then(math => {
12   console.log(math.add(5, 16))
 
13 })

註：如果你使用create-react-app構建程序，則可以直接使用這種語法；如果你使用的是Webpack或者其他打包工具，則需要你按照相應參考文檔進行相應配置。使用Babel時，需要babel-plugin-syntax-dynamic-import插件的幫助。

2. React.lazy

React.lazy方法可以讓我們動態加載組件

1 // 未使用React.lazy
2 import OtherComponent from ‘./OtherComponent‘
3 
4 // 使用React.lazy動態引用組件
5 const OtherComponent = React.lazy(() => import(‘./OtherComponent‘))

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

 1 const OtherComponent = React.lazy(() => import(‘./OtherComponent))
 2 
 3 // 使用Suspense
 4 function MyComponent() {
 5   return (
 6     <div>
 7       <Suspense fallback={<div>Loading . . .</div>}>
 8         <OtherComponent />
 
 9       </Suspense>
10     </div>
11   )
12 }

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

在route過程中使用React.lazy

頁面切換和加載通常都需要些時間，所以這裏適合使用React.lazy和Suspense的。

 1 import React, { Suspense, lazy } from ‘react
 2 import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom‘
 3 
 4 const Home = lazy(() => import(‘./routes/Home‘))
 5 const About = lazy(() => import(‘./routes/About‘))
 6 
 7 const App = () => (
 8   <Router>
 9     <Suspense fallback={<div>Loading . . . </div>}>
10       <Switch>
11         <Route exact path="/" component={Home} />
12         <Route path="/about" component={About} />
13       </Switch>
14     </Suspense>
15   </Router>
16 )

詳細可參考原文地址：https://reactjs.org/docs/code-splitting.html

React中的代碼分割