react 前端拆分

Modern JavaScript applications can be quite huge in terms of bundle size. You don’t want your users to have to download a 1MB package of JavaScript (your code and the libraries you use) just to load the first page, right? But this is what happens by default when you ship a modern Web App built with Webpack bundling.

就捆绑包大小而言，现代JavaScript应用程序可能非常庞大。 您不希望您的用户仅下载第一页就下载1MBJavaScript软件包(您的代码和所用的库)，对吗？ 但这是默认情况下，当您发布使用Webpack捆绑构建的现代Web应用程序时。

That bundle will contain code that might never run because the user only stops on the login page and never sees the rest of your app.

该捆绑软件将包含可能永远不会运行的代码，因为用户仅停留在登录页面上，而看不到应用程序的其余部分。

Code splitting is the practice of only loading the JavaScript you need the moment when you need it.

代码拆分是仅在需要时加载所需JavaScript的一种做法。

This improves:

这样可以改善：

• the performance of your app
  您应用的性能
• the impact on memory, and so battery usage on mobile devices
  对内存的影响，以及移动设备上的电池使用情况
• the downloaded KiloBytes (or MegaBytes) size
  下载的千字节(或兆字节)大小

React 16.6.0, released in October 2018, introduced a way of performing code splitting that should take the place of every previously used tool or library: React.lazy and Suspense.

2018年10月发布的React 16.6.0引入了一种执行代码拆分的方法，该方法应取代之前使用的每个工具或库： React.lazy和Suspense 。

React.lazy and Suspense form the perfect way to lazily load a dependency and only load it when needed.

React.lazy和Suspense形成了延迟加载依赖项并仅在需要时加载它的完美方法。

Let’s start with React.lazy. You use it to import any component:

让我们从React.lazy开始。 您可以使用它导入任何组件：

import React from 'react'const TodoList = React.lazy(() => import('./TodoList'))export default () => {  return (    
     
      
          
     
  )}

the TodoList component will be dynamically added to the output as soon as it’s available. Webpack will create a separate bundle for it, and will take care of loading it when necessary.

TodoList组件将在可用时立即动态添加到输出中。 Webpack将为此创建一个单独的捆绑包，并在必要时负责加载它。

Suspense is a component that you can use to wrap any lazily loaded component:

Suspense是一个组件，可用于包装任何延迟加载的组件：

import React from 'react'const TodoList = React.lazy(() => import('./TodoList'))export default () => {  return (    
     
      
              
             
          
     
  )}

It takes care of handling the output while the lazy loaded component is fetched and rendered.

在获取并渲染惰性加载的组件时，它会处理输出。

Use its fallback prop to output some JSX or a component output:

使用其fallback道具输出一些JSX或组件输出：

...      
     
      Please wait
      
}>        
            
     ...

All this plays well with React Router:

所有这些都可以在React Router上很好地发挥作用：

import React from 'react'import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'const TodoList = React.lazy(() => import('./routes/TodoList'))const NewTodo = React.lazy(() => import('./routes/NewTodo'))const App = () => (  
         
      
       Please wait
       
}>      
               
                
              
           
        
     )

翻译自:

react 前端拆分