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

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

JavaScript

1.ESLint

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

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

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

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

2.Tree Shakin

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

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

CSS

1.PurgeCSS:

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

npm install @fullhuman/purgecss --save-dev

在 vue.config.js 中配置 PurgeCSS：

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

2.vue-clearcss:

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

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

HTML

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

使用工具分析打包结果

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

步骤：

0. 安装 webpack-bundle-analyzer：

   npm install webpack-bundle-analyzer --save-dev
   

1. 在 vue.config.js 中配置：

   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
   ​
   module.exports = {
     configureWebpack: {
       plugins: [
         new BundleAnalyzerPlugin(),
       ],
     },
   };
   

2. 运行构建命令：

   npm run build