【发布时间】：2020-08-27 18:05:51
【问题描述】：
我有一个使用 Webpack 作为捆绑器的 React 项目，我将我的捆绑包分成两个块——主代码库 main.js 和供应商捆绑包 vendor.js。
构建这些包后，main.js 最终为 45kb，vendor.js 为 651kb。
一个特定的供应商库为 225kb，似乎是供应商导入中最严重的违规者。
我在文件顶部的页面组件中导入这个库：
import React from 'react';
import { ModuleA, ModuleB } from 'heavyPackage'; // 225kb import
...
const Page = ({ setThing }) => {
...
};
为了尝试将这个繁重的导入加载到单独的包中，我尝试使用动态导入来导入这些模块。
在Page 组件中，直到调用特定函数时才真正使用模块，因此我尝试在该范围内而不是在文件顶部导入模块：
import React from 'react';
...
const Page = ({ setThing }) => {
...
const handleSignIn = async () => {
const scopedPackage = await import('heavyPackage');
const { moduleA, moduleB } = scopedPackage;
// use moduleA & moduleB normally here
};
};
出于某种原因，我认为 Webpack 会智能地了解我在这里尝试做的事情，并将这个沉重的包分成自己的块，仅在需要时下载，但生成的包是相同的——@987654328 @ 是 45kb，vendor.js 是 651kb。我的思路是否正确，可能我的 Webpack 配置已关闭，或者我是否以错误的方式考虑动态导入？
edit 我已将 Webpack 配置为使用 splitChunks 拆分包。这是我的配置方式：
optimization: {
chunkIds: "named",
splitChunks: {
cacheGroups: {
commons: {
chunks: "initial",
maxInitialRequests: 5,
minChunks: 2,
minSize: 0,
},
vendor: {
chunks: "initial",
enforce: true,
name: "vendor",
priority: 10,
test: /node_modules/,
},
},
},
},
【问题讨论】：
-
首先，好的思维方式。现在让我们看看为什么它仍然在开始时带来它。你能调试你的代码并在heavyPackage代码的第一行下一个断点吗？也许其他人也在您不知情的情况下导入了它（也许第三部分库取决于它）。可能发生的另一件事是您将 webpack 优化规则配置为允许 webpack 生成的最大块是两个。这不太常见。我建议找到第一个带来这个惰性包的导入链 - 如果它来自您的动态导入，我会感到惊讶。
-
嗨@RazRonen - 感谢您的洞察力。我在我的 Webpack 配置中使用
splitChunks来拆分我的包。我已更新问题以包含此splitChunks设置。我需要进行更多研究，但我认为我的splitChunks配置阻止了它按预期工作？ -
有这方面的消息吗？所有的答案都涉及一个动态加载的组件，但你的问题是关于一个沉重的包
标签： javascript reactjs webpack dynamic-import