捆绑大小调查：缩小您的JavaScript的逐步指南

In my previous article about SSR and React Server Components, I talked a bit about "no interactivity gap". The time when the pre-rendered content is already visible, but the JavaScript has not been downloaded yet. As a result, the page is not interactive and might appear broken.

在我之前关于SSR和React Server Components的文章中，我谈到了一些关于“无交互间隙”的内容。预渲染的内容已经可见，但JavaScript尚未下载完成。这导致页面无法交互，可能看起来是破损的。

That kinda sucks. So what can be done to reduce it? There is only one answer to that: we need to reduce JavaScript download and execution times. We can try out different compression algorithms, play around with smarter code splitting, and probably hundreds of other useful techniques.

这有点糟糕。那么有什么办法可以减少它呢？只有一个答案：我们需要减少 JavaScript 的下载和执行时间。我们可以尝试不同的压缩算法，玩弄更智能的代码拆分，可能还有数百种其他有用的技术。

We could also try... here's a radical idea... not to ship that much JavaScript? 😅 I know, I know! Easier said than done. But if you've never investigated what's happening with your bundles, it could be a good exercise to understand the codebase. Plus, it's a ton of fun, if your hobbies include staring into graphs and tracking things down.

我们也可以尝试... 这是一个激进的想法... 不要发布那么多 JavaScript？😅 我知道，我知道！说起来容易做起来难。但如果你从未调查过你的包发生了什么，这可能是理解代码库的一个好练习。此外，如果你的爱好包括盯着图表和追踪事物，这也是非常有趣的。

Initial Project Setup

初始项目设置

First things first. In order to reduce some bundles, we need to have some large bundles. I implemented a Study Project specifically for this, if you want to follow along and confirm everything you read here with your own investigation. You can find it in this repo: https://github.com/developerway/analyze-bundle-size

首先，首先。为了减少一些包，我们需要有一些大的包。我专门为此实现了一个学习项目，如果你想跟着一起并用自己的调查确认你在这里阅读的所有内容。你可以在这个仓库中找到它： https://github.com/developerway/analyze-bundle-size

Install dependencies:

安装依赖：

npm install

Build it:

构建它：

npm run build

Notice its JavaScript size:

注意它的 JavaScript 大小：

5,321.89 kB │ gzip: 1,146.59 kB

Fall to the floor in disbelief. More than 5 megabytes! Good Lord 🤯 What exactly did you implement there, you might ask, and did it ...