通过使用 Knip 和 PurgeCSS 删除未使用的文件和依赖项来提高性能

作为开发人员，我们不断努力获得更好的性能。无论是更快的加载时间、更灵敏的 UI 还是更小的捆绑包大小，性能都是直接影响用户体验的关键指标。一个可以显着提高性能的被忽视的领域是清理未使用的文件和依赖项。在本文中，我将探讨如何识别和删除死代码、未使用的包和不必要的 CSS，从而使项目变得更精简、更快。我们还将了解 Knip 和 PurgeCSS 等工具如何帮助自动化此过程。

为什么清理未使用的代码很重要

随着时间的推移，项目很容易积累不再使用的不必要的文件、依赖项和 CSS 规则。这些残留物会使您的项目变得臃肿，加载速度变慢，维护变得更加困难，并且可能会以您没有立即意识到的方式影响性能。

通过定期删除未使用的代码，您不仅可以缩小 JavaScript 包和 CSS 文件的大小，还可以缩短加载时间、减少内存使用量并减少应用程序的总体占用空间。这种做法对于前端性能尤其重要，因为每一千字节都很重要。

工作工具：Knip 和 PurgeCSS

现在我们了解了保持项目整洁的重要性，让我们简要讨论一下可以用来自动化此过程的工具。 Knip 是一款旨在分析 JavaScript 项目并识别未使用的依赖项和文件的工具，而 PurgeCSS 则专注于从样式表中清理未使用的 CSS 类。这些工具共同帮助确保只有您实际使用的代码才能投入生产。

提高绩效：工作流程

1. 使用 Knip 审核您的依赖关系 清理项目的第一步是审核您的依赖项和模块。 Knip 扫描您的项目，分析导入，并提供正在使用的内容和可以安全删除的内容的报告。

安装和设置

npm init @knip/config

跑步

npm run knip

Knip 生成一份报告，突出显示未使用的依赖项和文件。这使您可以快速识别项目的哪些部分不再需要，从而帮助您减小捆绑包大小并提高性能。

示例输出

通过此摘要，您可以安全地查看您的文件。

2。使用 PurgeCSS 优化您的 CSS
CSS 就像 JavaScript 一样，随着时间的推移会变得臃肿。 PurgeCSS 是一个从样式表中删除未使用的 CSS 选择器的工具，确保您的项目仅提供必要的样式。

安装

npm i -D @fullhuman/postcss-purgecss postcss

在构建后运行 PurgeCSS CLI

我更喜欢将其用作构建后脚本，但您可以为您需要的任何文件配置该命令。只需指定您的构建文件夹和脚本的路径即可。

"scripts": {
      "postbuild": "purgecss --css dist/assets/*.css --content dist/index.html dist/assets/*.js --output dist/assets"
},

通过此设置，PurgeCSS 将自动删除未使用的 CSS 类，为您留下一个更小且优化的样式表。
查看 PurgeCSS 文档以了解更多详细信息。

3。定期审查和重构

虽然 Knip 和 PurgeCSS 等工具可以自动完成大部分清理过程，但定期检查代码库仍然很重要。养成重构旧代码、删除未使用的组件的习惯，并确保您的项目保持轻量级且易于维护。使用 CI/CD 管道自动化此过程还可以帮助您在继续开发时保持代码库的精简和高性能。

结论

提高应用程序的性能不仅仅在于编写高效的代码；还在于编写高效的代码。它还可以保持项目干净，没有不必要的文件和依赖项。定期删除未使用的代码不仅可以减少项目的大小，还可以缩短加载时间、简化维护并增强用户体验。 Knip 和 PurgeCSS 等工具可以更轻松地自动执行此清理过程，但关键的一点是养成不断审核和优化代码的习惯。

通过采用这种思维方式并利用这些工具，您可以确保您的项目保持快速、精简和优化，以获得最佳性能。

以上是通过使用 Knip 和 PurgeCSS 删除未使用的文件和依赖项来提高性能的详细内容。更多信息请关注PHP中文网其他相关文章！