我有一个React应用程序,它有一些非常大的依赖项,但只在少数页面上使用,所以我现在想把它们分成单独的包(块),并用动态导入加载它们。
我的目标是在代码库中定义某些点,在这些点上,Webpack应该移动仅由一方使用的所有内容
在那边
但我无法让它那样做。
让我从头开始。
无需任何额外配置或动态导入
,Webpack已经将我的代码拆分为几个块,可能是因为已经达到了自动代码拆分的阈值:
File sizes after gzip:
326.4 KB build/static/js/2.645b7d9f.chunk.js <-- some large dependencies already split off
266.8 KB (+9.72 KB) build/static/js/main.73cb0e8a.chunk.js
784 B (-428 B) build/static/js/runtime-main.dfdb9552.js
337 B build/static/css/main.6aa17999.chunk.css
这对我一点帮助都没有,因为我想在加载大块时显示进度指示器,而这只有在我控制
Promise
是我自己。
所以我有
禁用自动块分割
通过设置
optimization.splitChunks
到
false
。这给了我一个大块和两个不会打扰我的小标准块:
File sizes after gzip:
591.93 KB (+325.13 KB) build/static/js/main.8b66005b.chunk.js
784 B build/static/js/runtime-main.dfdb9552.js
337 B build/static/css/main.6aa17999.chunk.css
现在我添加一个
动态导入
,瞧,Webpack为它创建了命名块,“几乎”如预期:
583.29 KB (-8.64 KB) build/static/js/main.e1a7e462.chunk.js
10.18 KB build/static/js/upload.f16a28d9.chunk.js
1.18 KB (+426 B) build/static/js/runtime-main.609ffa10.js
337 B build/static/css/main.6aa17999.chunk.css
这个
import()
语句位于按钮处理程序中,我希望Webpack现在能将处理此特定按钮点击所需的所有重依赖项移动到一个大块中。但是生成的块大小只有10kb,而不是我在Bundle Analyzer中所期望的300kb。(它清楚地告诉我,按钮处理程序是一个关键的连接。)
所以我想:也许我们确实需要某种自动块分割逻辑。但之后
恢复块分割默认值
,显式创建的块保持其10kb;依赖关系现在被转移到一个大小为300kb的名为“3”的块中,该块再次由Webpack控制:
326.37 KB build/static/js/3.301c2a98.chunk.js
257.08 KB (-326.21 KB) build/static/js/main.2c6d68b0.chunk.js
10.18 KB build/static/js/upload.28a98a8d.chunk.js
1.18 KB (-1 B) build/static/js/runtime-main.ae96c043.js
337 B build/static/css/main.6aa17999.chunk.css
老实说,我不介意把这一切都交给Webpack
,但我至少需要访问一个基于事件的API,它会在获取或完成加载额外块时通知我,这样我就可以在我的应用程序中显示某种指示。
