Gridsome/Vue.js：如何减小核心包大小？

Question

我即将部署一个静态 Gridsome 网站。目前整个站点在 gzip 压缩之前重 518KB（包含自托管、大幅子集字体、缩小的内联 SVG 等）。我知道这已经不是有史以来最庞大的网站了。

运行 Chrome 的代码覆盖工具，app.js 的 88561 字节（总计 181166 字节）未使用。这几乎是文件的 50%。这……太多了。

除了 Gridsome，我没有其他依赖项，而且我自己的 JavaScript 代码也很轻量。所以我假设大部分权重来自 Vue.js 或 Gridsome。 Gridsome 已经在后面使用了 Webpack 4，所以我认为它做了很多剥离操作，但我仍然很烦恼。

有什么我可以做的吗，或者这只是不可避免的吗？我是否需要编写整个香草来绕过这种臃肿？

提前致谢:)

Answer 1

我刚刚创建了一个新的 Gridsome 站点，app.js 文件也有 ~181kB。 Gridsome 的文档说：

Gridsome 默认添加 57kB 最小 gzip JS 包大小。(vue.js, vue-router、vue-meta 和一些用于图像延迟加载）。

我在我构建的 app.js 文件上运行了gzip app.js，最终得到了一个 63kB 的文件。基于此，以及默认构建默认为 57kB 的事实，我认为如果没有大量自定义工作以去除未使用的内容，您最终不会得到一个小得多的 app.js 文件。

不幸的是，我认为这只是使用预建库和框架的缺点的一部分。这并不是说没有办法改进事情，但开箱即用，这就是你得到的。