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

Question

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

\n

\n

\xe2\x80\xa6chunks/26c47f1\xe2\x80\xa6.6971807\xe2\x80\xa6.js\n410.0 KiB\n399.8 KiB\n\xe2\x80\xa6chunks/25.91c4046\xe2\x80\xa6.js\n437.6 KiB\n392.5 KiB\n\xe2\x80\xa6chunks/30.3fdf525\xe2\x80\xa6.js\n

\n

\n

我不知道它们是如何生成的，也不知道如何删除它们。我到处都搜索过，但找不到解决方案。

\n

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

\n

Answer 1

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

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

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

浏览器扩展

浏览器扩展可以注入由 lighthouse 读取的代码，并且您的应用程序会认为这些代码未使用。

您应该在隐身模式下运行 lighthouse 以防止出现这种情况并获得最准确的分数 - 但这并不能解决所有未使用的代码问题。

Tree Shaking 和第三方库

您可以使用官方Next.js 捆绑分析器进行树摇动。这可以帮助识别重复的库并减少包尺寸和卡盘尺寸。Tree Shaking 将有助于识别如下问题。

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

以下内容将包括整个 lodash 库

import { throttle } from 'lodash'

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

import throttle from 'lodash/throttle'

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

你自己的代码

这些块也可能真正未使用，因此您需要查找/寻找：

• 没用过import
• 没用过export
• 未使用的变量
• export *并且您没有使用所有代码
• 项目文件夹中但未使用的代码
• 永远无法达到的条件代码 - 这些问题确实很常见 - linter 会发现这些问题

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

动态导入

您还可以通过动态导入有条件使用的代码来减小包大小。

深思熟虑

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