Vue 项目“瘦身”神器：自动清理未引用代码的终极方案

destinying2025-03-10 10:52

在 Vue 项目中清理未被应用的 JavaScript、CSS 和 HTML 代码，可以通过多种方法和工具来实现。以下是详细的步骤和方法：

JavaScript

1.ESLint

ESLint : 使用 ESLint 的 no-unused-vars 规则来检测未使用的变量。
在 .eslintrc.js 中添加 no-unused-vars 规则：

json 复制代码

  {
    "rules": {
      "no-unused-vars": "warn"
    }
  }

TypeScript : 在 tsconfig.json 中启用 noUnusedLocals 和 noUnusedParameters 选项。

json 复制代码

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

2.Tree Shakin

Tree Shaking: 使用 ES6 模块语法，构建工具（如 Webpack）能够更方便地进行静态分析，从而识别并删除未使用的代码。

java 复制代码

  // vue.config.js
  module.exports = {
    configureWebpack: {
      optimization: {
        usedExports: true
      }
    }
  }

CSS

1.PurgeCSS:

PurgeCSS 可以移除未使用的 CSS 代码，它会扫描这些文件以确定哪些 CSS 选择器被使用。

sql 复制代码

npm install @fullhuman/purgecss --save-dev

在 vue.config.js 中配置 PurgeCSS：

ini 复制代码

const PurgeCSS = require('@fullhuman/purgecss');

module.exports = {
  configureWebpack: {
    plugins: [
      new PurgeCSS({
        paths: [path.join(__dirname, 'src/**/*.vue')],
      }),
    ],
  },
};

2.vue-clearcss:

这是一款用于清理 Vue 项目中冗余 CSS 的工具，能够识别并列出项目中未使用的 CSS 样式。

bash 复制代码

  npm install -g vue-clearcss
  unvecss ./src/App.vue

HTML

HTML 代码通常需要手动检查，尤其是动态生成的模板部分。。

使用工具分析打包结果

通过 webpack-bundle-analyzer 分析打包文件，找出未使用的代码。

步骤：

安装 webpack-bundle-analyzer：
css 复制代码
```
npm install webpack-bundle-analyzer --save-dev
```

在 vue.config.js 中配置：

ini 复制代码

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin(),
    ],
  },
};

运行构建命令：
arduino 复制代码
```
npm run build
```