如何删除 Nextjs 应用程序中的 .js 块？

Question

我有这个 nextjs 应用程序，灯塔一直告诉我删除未使用的块。

…chunks/26c47f1….6971807….js
410.0 KiB
399.8 KiB
…chunks/25.91c4046….js
437.6 KiB
392.5 KiB
…chunks/30.3fdf525….js

我不知道它们是如何生成的，也不知道如何删除它们。找遍了都没有找到解决方法。

如何在构建后删除未使用的块？

Answer 1

如果您的构建生成到 dist 文件夹中 - 使用此命令更改您的 package.json 构建脚本

build: "rm -rf dist && next build"

Answer 2

你应该小心删除这些块，因为它会破坏你的构建。这些文件是为提高性能而进行代码拆分的结果。它们在每次构建时自动生成。因此，您需要在每次构建时手动删除它们，但同样，不推荐这样做。

Lighthouse 仅测试您当前所在的页面，因此您可能不会在该页面上使用这些块，而是在另一个页面上使用。

适当的问题是 - 如何在构建之前删除未使用的代码？

浏览器扩展可能会注入由 lighthouse 读取的代码，这些代码将被您的应用程序视为未使用。

您应该运行灯塔处于 incognito 模式以防止这种情况并获得最准确的分数 - 但这不会解决您所有未使用的代码问题。

你可以和官方一起摇树Next.js bundle analyzer。这可以帮助识别重复的库并减少包大小和卡盘大小。 Tree shaking 将有助于识别如下问题。

显示如何通过第 3 方库包含未使用代码的示例

以下将包括整个 lodash 库

import { throttle } from 'lodash'

正确的方法是仅导入您正在使用的内容，即

import throttle from 'lodash/throttle'

注意：一些第三方库导出所有内容，您不能只使用您需要的部分。如果您想完全删除未使用的代码，则必须删除此类库。

这些块也可以真正未使用，因此您需要 find/look 用于：

有些库可以找到未使用的代码。但对于小型项目，您可以只使用 linting 或执行手动搜索。

您还可以通过 dynamically importing 有条件使用的代码来减小包大小。

最后，即使有未使用的块文件，您仍然可以获得 100% 的灯塔分数。但是，您有很多未使用的代码，因此您的项目中可能存在重复代码或无用代码，应该将其删除。

Answer 3

在完成了在我之前提供答案的 2 位天才的步骤和建议之后，我相信摆脱 nextjs 应用程序中未使用的块的答案是完成列出的所有步骤，以及：

更重要的是，我发现未使用的块不会影响您使用 Lighthouse 的页面得分。可以找到影响页面得分的关键因素here

How to remove .js chunks in Nextjs application?