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

清疚 2023-01-05 14:18 38阅读 0赞

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

## 效果 ##

未动态加载组件时的打包结果：  
![在这里插入图片描述][20210112235006568.png_pic_center]  
动态加载组件后，生成物：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]  
可以看到1MB大小的app.js被拆分为了多个js文件。  
好处是：首屏加载速度快。

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

[20210112235006568.png_pic_center]: /images/20221119/d992e7c06da741d4a615320d988e4c31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210112234947955.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3,size_16,color_FFFFFF,t_70#pic_center