如何在Nextjs应用程序中删除.js块？ [英] How to remove .js chunks in Nextjs application?

问题描述

我有这个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

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

如何在生成后删除未使用的区块？

推荐答案

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

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

---

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

---

浏览器扩展

浏览器扩展可以注入由LighTower读取的代码，并且将被您的应用程序视为未使用。

您应该在匿名模式下运行LighTower以防止发生这种情况并获得最准确的分数，但这并不能解决您所有未使用的代码问题。

---

树抖动和第三方库

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

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

以下内容将包括整个lodash库

import { throttle } from 'lodash'

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

import throttle from 'lodash/throttle'

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

---

您自己的代码

区块也可能是真正未使用的，因此您需要查找/查找：

• 未使用import
• 未使用export
• 未使用的变量
• export *并且您没有使用所有代码
• 位于项目文件夹中但未使用的代码
• 永远无法访问的条件代码-这些问题真的很常见-Linter会处理这些

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

---

动态导入

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

---

发人深省

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

这篇关于如何在Nextjs应用程序中删除.js块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！