有没有办法在加载主块后加载所有剩余的块或手动指定要加载的块 - Webpack答案

【问题标题】：Is there is any way to load all remaining chunk after main chunk is loaded or manually specify which chunk to load - Webpack有没有办法在加载主块后加载所有剩余的块或手动指定要加载的块 - Webpack
【发布时间】：2021-03-29 17:56:31
【问题描述】：

我有一个单独的块，可以稍后或在主块之后加载。加载主块后是否有任何方法可以加载该块。并且不会触发需要该块的组件。

我正在使用以下方式加载该块：

import React, { Component } from "react";

const asyncComponent = (importComponent) => {
  return class extends Component {
    state = {
      component: null,
    };

    componentDidMount() {
      // import component should be function refererce.
      // it returns promise
      importComponent().then((cpm) => {
        // it has default property to load component dynamically (cpm.default)
        this.setState({ component: cpm.default });
      });
    }
    render() {
      // render method renders the component dynamically.
      const C = this.state.component;
      return C ? <C {...this.props} /> : null;
    }
  };
};

export default asyncComponent;

像这样导入模块。

const Mymodule = asyncComponent(() => import(/* webpackChunkName: "mychunk" */ "../../../components/Mymodule"));

我想在加载主块后加载这个块，但不渲染 Mymodule。

我正在使用

webpack 版本 4.44.2
反应版^17.0.1

【问题讨论】：

标签： reactjs webpack lazy-loading code-splitting

【解决方案1】：

这篇文章会对你有所帮助。

reactjs - React router base code-splitting (get first chunk and then get other chunks async in background) - Stack Overflow

注解/* webpackPreload: true * / 使webpack 能够将prefetch 添加到工件中。

【讨论】：