React.js中的代码拆分

我们使用webpack之类的工具将文件捆绑在React应用程序中。最后，捆绑将文件按照其导入顺序合并，并创建一个文件。

这种方法的问题在于，捆绑文件会随着文件的增加而变大。用户可能无法演唱所有功能部件，但仍在捆绑中加载它们，这可能会影响应用程序的加载。

为了避免这种情况，React中使用了代码拆分。

示例

捆绑示例-

// app.js
import { total } from './math.js';
console.log(total(10, 20)); // 42
//math.js-
export function total(a, b) {
   return a + b;
}

束

function total(a, b) {
   return a + b;
}
console.log(total(10, 20)); // 30

代码拆分功能使用延迟加载来仅加载所需的那些文件。这可以大大提高应用程序的性能。

使用动态导入是延迟加载的简单用例-

之前

import { total } from './math';
console.log(total(10, 20));

后

import("./math").then(math => {
   console.log(math.total(10, 20));
});

动态导入仍然不是官方语言标准的一部分。对于babel，我们必须使用 babel-plugin-syntax-dynamic-import。

React.lazy帮助延迟导入组件。

import TestComponent from './ TestComponent ';
function LazyComponentLoadExample() {
   return (
      <div>
         < TestComponent />
      </div>
   );
}

后

const TestComponent = React.lazy(() => import('./TestComponent'));
function LazyComponentLoadExample() {
   return (
      <div>
         <TestComponent />
      </div>
   );
}

使用悬念

这是回退内容，直到组件的延迟加载完成为止

const TestComponent = React.lazy(() =>import('./TestComponent'));
function SuspenseComponentExample() {
   return (
      <div>
         <Suspense fallback = {<div>Loading...</div>}>
            <TestComponent />
         </Suspense>
      </div>
   );
}

基于路由的代码拆分

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';
const Customer = lazy(() = > import('./routes/Customer'));
const Admin = lazy(() = > import('./routes/Admin'));
const App = () = > (
   <Router>
      <Suspense fallback = {<div>Loading...</div>}>
         <Switch>
            <Route exact path = "/" component = {Customer}/>
            <Route path = "/admin" component = {Admin}/>
         </Switch>
      </Suspense>
   </Router>
);

由于React.lazy仅支持默认导出，因此使用中间导出处理命名的导出，中间导出将默认导出。