Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
44 lines (32 sloc) 1.78 KB
title date permalink tags
React.js 懒加载
2018-11-02
/reactjs-code-splitting-lazy-load
React.js

起初,我们把所有 JavaScript 文件打包塞进一个 app.js 中,但随着功能的增加,我们的 app.js 文件迅速增长,直到有一天,它长到 8M - 你非常清楚,这远不是终点。

一个很容易想到的解决办法是代码分割 - 你可能还见过懒加载延迟加载按需加载等等说法。它的道理非常简单,我现在访问登录页,则没有必要同时加载设置页的代码,我可以在访问设置页的时候再加载它的代码 - 毕竟,我可能永远都不会用到设置页。

动态 import 即为解决代码分割问题而来:

import('./xx').then(xx => {
  // 这里我们得到了动态加载的模块
})

不过 React 16.6.0 引入了 React.lazy,让我们分割起来更方便。

在 React 下,我们现在这样分割代码:

import React, { lazy, Suspense } from 'react'

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

function MyComponent() {
  return (
    <Suspense fallback={<div>I'm loading...</div>}>
      <OtherComponent />
    </Suspense>
  )
}

为什么非得使用 Suspense?因为 OtherComponent 是异步加载的,Suspense 在它加载完成前,提供了一个 fallback 界面。当然,Suspense 有更多的应用场景,但那是后话了。

除了 React 组件外,lazy 方法还可以懒加载路由、图片等资源 - 只要它是个模块。

You can’t perform that action at this time.