简化懒加载的loader

简化懒加载的loader

原来的情况下，要使用懒加载的组件：

// 引入 lazy
import {lazy} from 'react';

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

写一个Loader简化调用：

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

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：

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

引入组件：

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

局限性

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