React笔记——高级指引：2.Code-Splitting：代码分割

文章索引

1.打包

概念：

是一个将文件引入并合并到一个单独文件的过程，最终形成一个”bundle”。接着在页面上引入该bundle，整个应用即可一次性加载。

示例：

// App文件
// app.js
import { add } from './math'

console.log(add(10, 20))

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

// 打包后文件
function add(a, b) {
  return a + b
}

console.log(add(10, 20))

// App文件

// app.js

import { add } from './math'

console.log(add(10, 20))

// math.js

export function add(a, b) {

return a + b

}

// 打包后文件

function add(a, b) {

return a + b

}

console.log(add(10, 20))

2.代码分割

随着应用的增长，代码包也随之增长；

代码分割能够帮助“懒加载”所需要的内容，可以显著地提高应用性能；

尽管并没有减少应用整体的代码体积，但你可以避免加载用户永远不需要的代码，并在初始加载的时候减少所需加载的代码量。

3.`import()`

在应用中引入代码分割的最佳方式是通过动态import()语法

使用前：

JavaScript

import { add } from './math' console.log(add(10, 20))

1
2
3

import { add } from './math'

console.log(add(10, 20))
使用后：

JavaScript

import('./math').then(math => { console.log(math.add(10, 20)) })

1
2
3

import('./math').then(math => {
console.log(math.add(10, 20))
})

4.React.lazy

React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。

使用前：

JavaScript

import OtherComponent from './OtherComponent'

1

import OtherComponent from './OtherComponent'
使用后：

JavaScript

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

1

const OtherComponent = React.lazy(() => import('./OtherComponent'))
- 此代码将会在组件首次渲染时，自动导入包含 OtherComponent 组件的包。并返回一个 Promise，该 Promise 需要 resolve 一个 defalut export 的 React 组件。
- 在 Suspense 组件中渲染 lazy 组件
- fallback 属性接受任何在组件加载过程中你想展示的 React 元素
- 可以用一个 Suspense 组件包裹多个懒加载组件。

示例：

// HelloWorld.js

import React from 'react'

function HelloWorld() {
  return <div>Hello World!</div>
}

export default HelloWorld


// App.js
import React, { Suspense } from 'react'

// React.lazy
const HelloWorld = React.lazy(() => import('./components/HelloWorld'))

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

function App() {
  return (
    <div className="App">
      <MyComponent />
    </div>
  )
}

export default App

// HelloWorld.js

import React from 'react'

function HelloWorld() {

return <div>Hello World!</div>

}

export default HelloWorld

// App.js

import React, { Suspense } from 'react'

// React.lazy

const HelloWorld = React.lazy(() => import('./components/HelloWorld'))

function MyComponent() {

return (

<div>

<Suspense fallback={<div>Loading...</div>}>

</Suspense>

</div>

)

}

function App() {

return (

</div>

)

}

export default App

异常捕获边界（Error boundaries）

模块加载失败，会触发一个错误，可以通过异常捕获边界技术来处理这些情况。

import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';

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

const MyComponent = () => (
  <div>
    <MyErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </MyErrorBoundary>
  </div>
);

import React, { Suspense } from 'react';

import MyErrorBoundary from './MyErrorBoundary';

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

const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

const MyComponent = () => (

<div>

<Suspense fallback={<div>Loading...</div>}>

</section>

</Suspense>

</MyErrorBoundary>

</div>

);

5.基于路由的代码分割

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>
)

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 = () => (

<Suspense fallback={<div>Loading...</div>}>

</Switch>

</Suspense>

</Router>

)

6.命名导出

React.lazy 目前只支持默认导出（default exports）
如果你想被引入的模块使用命名导出（named exports），你可以创建一个中间模块，来重新导出为默认模块。

JavaScript

// ManyComponents.js export const MyComponent = /* ... */ export const MyUnusedComponent = /* ... */

1
2
3

// ManyComponents.js
export const MyComponent = /* ... */
export const MyUnusedComponent = /* ... */

JavaScript

// MyComponent.js export { MyComponent as default } from "./ManyComponents.js"

1
2

// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js"

JavaScript

// MyApp.js import React, { lazy } from 'react' const MyComponent = lazy(() => import("./MyComponent.js"))

1
2
3

// MyApp.js
import React, { lazy } from 'react'
const MyComponent = lazy(() => import("./MyComponent.js"))

1.打包

2.代码分割

3.import()

4.React.lazy

5.基于路由的代码分割

6.命名导出

3.`import()`