reactjs - 有什么办法可以避免在 React 应用程序的页面加载时加载 npm 包

Question

我在我的项目中使用了一些大型 npm 包（slate.js）。问题是，slate（和其他 npm 包）会在页面加载时自动加载，即使它只在延迟加载的组件中使用。

我试图避免加载 pageload slate 和其他一些包。

到目前为止，我在我的 webpack 配置中使用了 sideEffects 和 usedExports，但我无法完成任何有用的事情。Webpack 仍然会自动将 slate 和其他 npm 包自动放入 vendor.js 中，并将其注入到已发布的 html 文件中（我相信使用 HtmlWebpackPlugin）

（仅供参考，我正在使用 CRA 以及 webpack 的配置覆盖）

我不认为这段代码有用，但这是我的 webpack 优化属性。

config.optimization = {
      usedExports: true,
      splitChunks: {
        chunks: "async",
        maxSize: 750000,
        cacheGroups: {
          react: {
            test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
            name: "react",
            chunks: "all",
          },
          slate: {
            test: /[\\/]node_modules[\\/](slate|slate-react)[\\/]/,
            name: "slate",
            chunks: "all",
          },
        },
      },
    };

Answer 1

您还需要使用动态import()s导入包：

// likely bundles slate up into your main vendor bundle :(
import slate from 'slate';

// slate will likely get its own webpack chunk, yay!
export default async function doSomethingWithSlate() {
  const slate = await import('slate');
  // do things with slate
}