1、Bundling

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

　　示例【app】

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

// math.jsexport 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 = () => (  
     );

现在

import Loadable from 'react-loadable';const LoadableOtherComponent = Loadable({  loader: () => import('./OtherComponent'),  loading: () => 
     
      Loading...
     
,});const MyComponent = () => (  
     );

3、基于路由的代码分割

　　以下是如何使用React Router和React Loadable等库设置基于路由的代码分割到您的应用程序的示例。

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';import Loadable from 'react-loadable';const Loading = () => 
     
      Loading...
     
;const Home = Loadable({  loader: () => import('./routes/Home'),  loading: Loading,});const About = Loadable({  loader: () => import('./routes/About'),  loading: Loading,});const App = () => (  
         
            
             
            
        
       
        
     );