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

Question

我有一个单独的块，可以稍后或在主块之后加载。有没有办法在加载主块后加载该块。并且不触发需要该块的组件。

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

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

Answer 1

这篇post会对你有所帮助。

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

Annotation /* webpackPreload: true * / 使 webpack 能够将 prefetch 添加到 artifact 中。

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

Is there is any way to load all remaining chunk after main chunk is loaded or manually specify which chunk to load - Webpack

lazy-loading

reactjs

webpack

code-splitting