前端优化-检测dead code

一、使用 ESLint 检测并删除死代码

ESLint 允许我们通过其恰当命名的规则来检测文件中未使用的变量。no-unused-vars 这条规则通过两种方式保护我们不引入死代码。首先，它会告诉我们是否声明了一个在文件其他地方未使用的变量；其次，它会告诉我们函数中是否有未使用的参数。

二、使用TypeScript

在我们的项目中使用 TypeScript 有很多优点。其中之一是它为我们提供了一种检测死代码的简单方法。

首先，我们可以以不允许使用局部变量和函数参数的方式配置 TypeScript 。这与上面的 ESLint 规则类似。要通过 TypeScript 强制执行这些规则，我们可以将它们添加到我们的 tsconfig 文件中：

json 复制代码

{
  "compilerOptions": {
    ...otherOptions,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
  }
}

TypeScript只能处理本文件中的Unread，exports以后检测不到，但ts-prune可以检查未使用的exports

三、使用ts-prune

css 复制代码

npm install ts-prune --save-dev

package.json

json 复制代码

{
  "scripts": {
    "find-deadcode": "ts-prune"
  }
}

npm run find-deadcode 之后获得所有未使用的exports的列表。

四、使用depcheck检查未使用的依赖库

当我们在开发项目时，会引入各种依赖库。但是有些依赖库可能只用到了部分功能，或者已经不再需要了，但是却一直被保留在项目中。这些未使用的依赖库会占据项目的空间，增加项目的复杂度，影响项目的性能。

npm install -g depcheck

控制台输出所有未使用的依赖库和模块：

然后，移除未使用的依赖。

五、Tree Shaking

tree-shaking 最早由 Rich Harris 在 rollup 中提出。为了减少最终构建体积而诞生。 tree-shaking 是一个通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code) 行为的术语。

它依赖于 ES2015 中的 import 和 export 语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件使用。

在 Angular 应用程序中实现 Tree Shaking

使用Angular CLI创建带有 Syncfusion EJ2 Angular 组件的 Angular 应用程序，如入门文档中所述。
运行ng build --prod或ng serve --prod命令来构建或提供启用了 Tree Shaking 的应用程序。示例代码片段展示了如何在angular.json配置文件中启用 Tree Shaking

json 复制代码

"configurations": {
    "production": {
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true
    }
},

ej2.syncfusion.com/angular/doc...