Day17 浅谈Code-Splitting

当我们在开发专案时，模组的体积会随着功能的增加而变的庞大，甚而影响到使用者的体验，这时候就需要做所谓的Code Splitting。Code Splitting的概念为以下两点:

1. 将不常变动或更新的程序独立打包出来，让浏览器读取快取而不用重新读取全部的程序
   可以将不常更动的第三方套件独立出来，如React之类。
2. 依照功能模组打包你的程序，且在使用该功能时才去载入模组
   可以减少程序初始化时下载的内容。

import()

使用动态import()的语法，可以让你在使用该功能时才载入程序。
引入前:

import { add } from './math';

console.log(add(16, 26));

引入後:

import("./math").then(math => {
  console.log(math.add(16, 26));
})

React.lazy

React.lazy可以帮助你让程序做到动态载入，使用方法为React.lazy渲染一个动态import()的component。
引入前:

import OtherComponent from './OtherComponent';

引入後:

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

lazy component需要在 Suspense component中渲染，Suspense component可已让等待载入的component显示loading文字，等待程序载入完毕。

import React, { Suspense } from 'react';

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

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