我们花了大约五分钟的时间和十行代码将 vendor.js 从 210kb 缩减到 16kb

尽管我们努力将dev.to上的 JavaScript 加载量降至最低，但我们在优化方面却有些懈怠。我们的vendor.js文件（包含所有外部库的代码）已经膨胀到 210kb。我们交付的 JavaScript 总大小根据具体情况已经达到了 250-300kb 左右。

我们异步加载所有 JavaScript，因此按照大多数标准，210kb 的文件大小仍然足够。因此用户体验并没有受到太大影响，但如果没有必要，继续这样下去就太愚蠢了。

我最终决定花点脑力来解决这个问题，最终的解决方案相当简单。我个人之前犹豫过是否要研究这个问题，因为我有点不确定这是否是正确的方法。但这次尝试之后，我非常确定它是对的。

一个巧妙的技巧是使用称为“动态导入”的技术来加载这些库。

// before
import { bark } from "./dog";
bark("Hello World");

// after
import("./dog").then(({ bark }) => {
  bark("Hello World");
});

这篇文章精彩地概述了这一技术和其他出色的技术：

我们如何将初始 JS/CSS 大小减少 67%

吉列尔姆·奥宁 ・ 2018 年 11 月 26 日

#webpack #webdev #react #javascript

通过这种方式，一些不常用的库只会在用户触发代码操作时才会被调用。我们的vendor.js代码体积已经缩减到大约 16kb，JavaScript 整体初始加载量大约在 65-75kb 之间，并且会根据具体情况逐渐增加。我相信我们可以将初始加载量控制在 25kb 以下，但我认为这需要的时间会超过五分钟。正如前面提到的，JavaScript 是延迟加载的，因此它永远不会成为阻塞资源。

这项技术已经在代码的某个区域实施，但我们尚未在这些重要的关键环境中实现它。通过将一些昂贵的库迁移到这项技术，并在代码库中进一步建立这种模式，我相信我们已经做好了准备，能够提供最高效的体验，并避免将来出现类似的问题。

这是实施变更的PR 。

祝您编码愉快。