简化懒加载的loader

ObjectKaz Lv4

简化懒加载的loader

原来的情况下,要使用懒加载的组件:

1
2
3
4
5
// 引入 lazy
import {lazy} from 'react';

// 定义Lazy组件
const Group = lazy(() => import('xxxx'));

写一个Loader简化调用:

webpack的loader在pitch阶段不会读取文件,这里可以利用pitch阶段输出代码,并将资源请求转发到真实的路径中。

1
2
3
4
5
6
7
8
9
10
11
const Loader = function (source) {};

Loader.pitch = function (remainingRequest, previousRequest, data = {}) {
return `
import { lazy } from 'react';

export default lazy(() => import('${this.resourcePath}'));
`;
};

module.exports = Loader;

配置Loader:

1
2
3
4
5
{
test: /\.(js|mjs)$/,
resourceQuery: /lazy/,
use: [path.resolve(__dirname, './ReactLazyComponentLoader.js')]
}

引入组件:

1
import User from 'xxxxx?lazy'; // 自动生成懒加载版本的组件

局限性

只支持组件使用默认导出,且不支持导入组件的其他内容。

  • 标题: 简化懒加载的loader
  • 作者: ObjectKaz
  • 创建于: 2021-08-24 01:26:00
  • 更新于: 2022-10-27 04:05:35
  • 链接: https://www.objectkaz.cn/ca3c5d44e7db.html
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
此页目录
简化懒加载的loader