102-advanced-代码分割

1、Bundling

　　大多数React应用程序将使用Webpack或Browserify等工具“捆绑”文件。捆绑是跟踪导入的文件并将它们合并到单个文件中的过程：“捆绑”。然后，该包可以包含在网页中以一次加载整个应用程序。

　　示例【app】

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

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

　　Bundle:

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

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

　　如果您使用的是创建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>
);