## 代码分割 * 解决因代码 **体积过大** 而导致 **加载时间过长** 的问题 * 创建多个包，在运行时动态加载，减少代码加载量 ## 实现代码分割 1. import 动态加载 2. React.lazy 3. 基于路由的代码分割 ### 1. import 动态加载 * 动态导入产生的 bundle 文件，它的文件名就是一个序号 * 魔法注释可以来命名 * 相同的名称会被打包在一起 ``` export default class App extends React.Component { handleClick() { // `webpack`提供的魔法注释(`magic comments`)来对分割的`chunk`进行命名 import(/* webpackChunkName: "show" */'./show.js').then(res => { console.log(res) }) } render () { return <button id="btn" onClick={this.handleClick}>点击加载show.js</button> } }; ```   ### 2. React.lazy * 像渲染常规组件一样处理动态引入 * 接受一个函数，这个函数需要动态调用`import()` * import 中引入的组件目前只支持默认导出（default exports） * import 函数返回一个`Promise` * 不支持服务端渲染 ``` // 使用前 import CompoentOne from './CompoentOne' // 使用后 const CompoentOne = React.lazy(() => import('./CompoentOne')) const CompoentOne = React.lazy(() => import(/* webpackChunkName: "componentOne" */'./CompoentOne')) ```  #### 处理错误 * 只适用于 class 组件 * **可以捕获其子组件的错误**，它无法捕获其自身的错误 * 可以放在最顶层的组件，也可以单独包裹某个部分   #### 注意点： 1. 错误处理组件自身的错误无法捕获 2. 异步错误，比如计时器 3. 事件中的错误，比如click事件中发生的错误 4. 事件处理器中的错误可以使用 try catch 捕获 [Vue中的错误捕获](https://www.kancloud.cn/book/liuyuxian/js_base/preview/errorCaptured%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86.md) ### 路由按需加载 * React.lazy 结合 React Router 实现路由按需加载 ``` const Home = lazy(() => import('./components/home')) const About = lazy(() => import('./components/about')) ```