react-loadable 组件动态加载 打包文件分割

Intro

使用webpack对资源进行打包后，开发后的生成物只有：
index.html
app.js (可能为其他文件名)

而app.js中包含了我们写的所有组件、逻辑等(甚至包含样式配置以及部分很小的图片资源！)。

这就导致这样的应用首屏加载速度慢/白屏时间长。
除了CDN加速、html的div#root填充默认内容外，还有一个角度就是：
将打包了几乎所有资源的app.js分拆，按需请求加载。这样页面的首次响应会快一点。

操作

• 安装依赖

npm install react-loadable

• 简单使用

假设现在我们自己封装了一个组件：Home
本来的引入方式：import Home from "../routes/Home";

当使用react-loadable后的引入方式：

import Loadable from "react-loadable";

const Home = Loadable({
  loader: () => import("./Home") ,
  loading: () => {
    return ( <div>loading...</div> );
  }
});

如果要引入多次自定义的组件，这个loading可以传入一个默认的loading组件，方便重用。

• 封装工具类

// ./src/utils/loaderHelper.js
import React from "react";
import Loadable from "react-loadable";

/**
 * 通用的加载中组件
 * @param {Object} props 
 */
const LoadingComponennt = function(props) {
  // console.log("加载中组件", props);
  return (
    <div>
      loading...
    </div>
  );
}

function loaderHelper(loaderRet, loading=LoadingComponennt) {
  // console.log("loaderHelper", arguments);
  if(loaderRet === undefined) {
    throw new Error(`请传入参数，格式： import("xxx")`);
  }
  return Loadable({
    loader: () => loaderRet,
    loading,
    delay: 200,
    timeout: false,
  });
}

export default loaderHelper;

这样再次引入我们的组件，只需要写：

import loaderHelper from "./utils/loaderHelper";

const Home = loaaderHelper( import("./Home") );
const About = loaaderHelper( import("./About") );
const NotFound = loaaderHelper( import("./NotFound") );

只需要向loaderHelper传入loader参数即可。
如果有特殊定制，也可以像loaderHelper传入特别的loading参数。

效果

未动态加载组件时的打包结果：

动态加载组件后，生成物：

可以看到1MB大小的app.js被拆分为了多个js文件。
好处是：首屏加载速度快。

以上文件名开头的674.是因为我配置了webpack的output的规则：
filename: "[hash:3].[name].js?v=[hash]",

标签：loading,loadable,js,react,loaderHelper,组件,import,Home,加载
来源： https://blog.csdn.net/wuyujin1997/article/details/112550225