1、Bundling

　　大多數React應用程序將使用Webpack或Browserify等工具“捆綁”文件。捆綁是跟蹤導入的文件並將它們合並到單個文件中的過程：“捆綁”。然後，該包可以包含在網頁中以一次加載整個應用程序。

　　示例【app】

// app.js
import { add } from ‘./math.js‘;
console.log(add(16, 26)); // 42

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

　　Bundle:

function
 
 add(a, b) {
  return a + b;
}

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

　　如果您使用的是創建React應用程序，Next.js，Gatsby或類似工具，那麽您將擁有一個開箱即用的Webpack設置來捆綁您的應用程序。

2、Code-Splitting

　　是Webpack和Browserify等捆綁軟件支持的一項功能，它可以創建多個可在運行時動態加載的bundle。代碼分割您的應用程序可以幫助您“延遲加載”用戶當前需要的內容，這可以顯著提高應用程序的性能。

2.1、import

　　將代碼分割引入您的應用程序的最佳方式是通過動態import（）語法。

以前使用

import { add } from ‘./math‘;

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

現在可以使用

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

但目前只是提議

　　當Webpack遇到這種語法時，它會自動啟動代碼分割您的應用程序。如果您正在使用創建React應用程序，則已經為您配置了該應用程序，您可以立即開始使用它。它在Next.js中也支持開箱即用。

　　在使用Babel時，您需要確保Babel能夠解析動態導入語法，但不會對其進行轉換。為此，您需要使用babel-plugin-syntax-dynamic-import。

2.2、React Loadable

包裝動態導入，React Loadable可幫助您創建加載狀態，錯誤狀態，超時，預加載等。它甚至可以幫助您在服務器端渲染包含大量代碼分割的應用程序。

之前：

import OtherComponent from ‘./OtherComponent‘;

const MyComponent = () => (
  <OtherComponent/>
);

現在

import Loadable from ‘react-loadable‘;

const LoadableOtherComponent = Loadable({
  loader: () => import(‘./OtherComponent‘),
  loading: () => <div>Loading...</div>,
});

const MyComponent = () => (
  <LoadableOtherComponent/>
);

3、基於路由的代碼分割

　　以下是如何使用React Router和React Loadable等庫設置基於路由的代碼分割到您的應用程序的示例。

import { BrowserRouter as Router, Route, Switch } from ‘react-router-dom‘;
import Loadable from ‘react-loadable‘;

const Loading = () => <div>Loading...</div>;

const Home = Loadable({
  loader: () => import(‘./routes/Home‘),
  loading: Loading,
});

const About = Loadable({
  loader: () => import(‘./routes/About‘),
  loading: Loading,
});

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
    </Switch>
  </Router>
);

102-advanced-代碼分割