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参数。

效果

未动态加载组件时的打包结果:
react-loadable 组件动态加载 打包文件分割
动态加载组件后,生成物:
react-loadable 组件动态加载 打包文件分割
可以看到1MB大小的app.js被拆分为了多个js文件。
好处是:首屏加载速度快。

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

上一篇:Uboot:Loading: *** ERROR: File lookup fail


下一篇:Vue Element UI v-infinite-scroll无限触发问题解决+样例代码