为什么在导入带有 .ts 扩展名的 polyfills 文件时 webpack 构建时间更快？

编程问答 2022-05-13

问题描述

我们正在开发一个多租户项目，该项目将 angularjs 和 webpack 与 babel 结合使用。最近我们开始将此项目迁移到最新的 angular 版本 (v11)。

我们项目的性质是我们不使用 angular-cli 或 angular.json 来构建可配置性。相反，我们依靠单独的 webpack 配置来构建 node_modules 和我们自己的 javascript 文件。我们使用 webpack 为每个租户bundle js 包文件。

在进行此迁移时，我们必须在每个包文件的顶部导入 polyfills.ts 文件，以便我们获得对 IE11 等旧浏览器的兼容性。

这是 polyfills.ts 的内容

// Object
import "core-js/features/object/assign";
import "core-js/features/object/keys";
import "core-js/features/object/values";
import "core-js/features/object/is";

// Number
import "core-js/features/number/is-integer";
import "core-js/features/number/is-nan";
import "core-js/features/number/parse-float";
import "core-js/features/number/parse-int";

// Map
import "core-js/features/map/map-values";

// Array
import "core-js/features/array/every";
import "core-js/features/array/includes";
import "core-js/features/array/fill";
import "core-js/features/array/find";
import "core-js/features/array/find-index";
import "core-js/features/array/from";
import "core-js/features/array/map";
import "core-js/features/array/some";
import "core-js/features/array/filter";

// String
import "core-js/features/string/from-code-point";
import "core-js/features/string/includes";
import "core-js/features/string/starts-with";
import "core-js/features/string/ends-with";

// Set
import "core-js/features/set";

// URL
import "core-js/features/url";

// Promise
import "core-js/features/promise";

// Symbol
import "core-js/features/symbol/async-iterator";
import "core-js/features/symbol/for";
import "core-js/features/symbol/iterator";

// Need this for angular to work
import "zone.js/dist/zone";

问题

我们最近注意到，在我们开始导入包文件顶部的 polyfills.ts 后，我们的本地构建过程开始花费大量时间来完成。在本地构建大约需要 150 秒。此外，我们需要将运行时的 heap-size 增加 1GB。此更改还增加了热重载时间间隔，即在本地进行更改后需要更多时间来刷新浏览器。

解决方案

在摆弄配置这么多小时后，我们发现解决方案是导入带有 .ts 扩展名的 polyfills 文件。这将构建时间减少了大约 3 倍。此外，我们不需要增加堆大小。

所以从下面

import '../../assets/javascripts/polyfills-v2'; // Build time 150 seconds. Also need to increase heap-size

到

import '../../assets/javascripts/polyfills-v2.ts'; // Build time Now roughly 40 seconds. No need to increase heap-size

修复了问题。

然而，问题是我们不能 100% 确定为什么将 .ts 添加到导入会增加构建时间。

问题

我们对这种行为有一些疯狂的预感。我们认为添加扩展名有助于 webpack 在构建期间更快地识别文件。但我们并不是 100% 相信这个原因。

所以问题是，有人对为什么会发生这种情况有更好的了解吗？将不胜感激任何方向。虽然我很高兴这个解决方案有效，但我想不出一个令人信服的理由来说明这个解决方案如何改善构建过程/时间。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularangularjsbabel-loaderpolyfillswebpackwebpackwebpack