有什么方法可以避免在React应用程序的页面加载中加载npm包吗？

Question

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

我正在尝试避免在页面加载石板和少数其他包上加载。

到目前为止，我在我的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

您还需要使用dynamic 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
}