有什么方法可以避免在 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

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

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

Is there any way to avoid loading npm packages on pageload of React application

reactjs

webpack

slatejs