reactjs - 响应延迟加载需要 webpack 吗？

Question

我对 webpack 的使用感到困惑，因为 webpack 是依赖管理器并创建了一个包，但这并没有在CoreUi模板中发生。

表示此coreUi模板使用React Lazy loadinglikeconst Login = React.lazy(() => import('./views/Pages/Login'));但不使用 webpack。

那么如何lazy loading工作？延迟加载不需要 webpack 吗？如果是，那么为什么是 webpack ？

Answer 1

Webpack 是一个捆绑库，与依赖管理无关（npm 对 node 和 javascript 前端应用程序进行依赖管理），Webpack 在这里的作用是代码拆分和解析动态导入并确定需要哪部分代码，例如：

import { add } from './math';

console.log(add(16, 26));

支持延迟加载使用动态导入：

import("./math").then(math => {
  console.log(math.add(16, 26));
});

因此，如果您的代码看起来像后者，（如果 Webpack 配置为延迟加载）它将正确处理 React 延迟加载代码，以通过仅使用当前运行部分代码的需要代码来提高性能。

Webpack 不是唯一支持动态导入的打包工具，还有Rollup和browserify/factor-bundle。

带回家，React 延迟加载不需要 webpack，你只需要一个支持代码拆分和动态导入的打包器。