react如何用懒加载减少首屏加载时间_JavaScript

上一篇: JavaScript中的this指向问题详解下一篇:react项目如何运行在微信公众号

react如何用懒加载减少首屏加载时间

发布时间：2022-04-16 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了react如何用懒加载减少首屏加载时间，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

使用

安装

npm install @loadable/component -D
# or use yarn
yarn add @loadable/component -D

如何在路由中使用？

在src/router/index.js文件中按照如下举例来写：

import React From "react";
import { Route, SwITch } from "react-router-dom";
import routerList from "./routes";

const router = () => {
  return (
    <Switch>
      {routerList.map((item) => {
        const { component: Component, key, path, ...itemPRops } = item;
        return (
          <Route
            exact={true}
            key={key}
            path={path}
            render={(allProps) => <Component {...allProps} {...itemProps} />}
          />
        );
      })}
    </Switch>
  );
};

export default router;

在src/router/routes.js文件按照如下举例来写：

import loadable from "@loadable/component";

const Error404 = loadable(() => import("@/pages/err/404")); // 对应文件 src/pages/err/404.js
const Home = loadable(() => import("@/pages/home"));
const Demo = loadable(() => import("@/pages/demo"));

const routerList = [
  {
    path: "/",
    key: "home",
    components: Home,
  },
  {
    path: "/demo",
    key: "demo",
    components: Demo,
  },
  {
    path: "*",
    key: "404",
    components: Error404,
  },
];

export default routerList;

在src/App.js文件按照如下举例来写：

import React from "react";
import { browserRouter as Router } from "react-router-dom";
import Routes from "./router";
export default function App() {
  return (
    <Router>
      <Routes />
    </Router>
  );
}

此时可以去页面查看切换路由的时候是否动态加载了 js 文件。若切换路由加载了 js 文件，说明懒加载路由成功！