如何高效识别网站中未使用的CSS与JS代码

针对CSS的清理方法 #

• Chrome DevTools Coverage工具
  打开DevTools，按Ctrl+Shift+P（Windows）或Cmd+Shift+P（Mac）搜索「Coverage」，点击「Start Instrumenting Coverage and Reload Page」开始录制。浏览所有页面，触发所有交互（比如展开菜单、打开弹窗、切换分页），录制结束后就能看到style.css中未被使用的规则占比。可以直接在面板中查看具体未使用的代码块，手动标记或导出报告。
• PurgeCSS
  适合静态或服务端渲染的站点，它会扫描指定的HTML/模板文件，匹配其中的选择器，移除style.css中未被引用的规则。示例命令：

  purgecss --css style.css --content "*.html" --output cleaned-style.css
  

  注意配置whitelist参数保留动态生成的选择器（比如通过JS添加的类名），避免误删。
• UnCSS
  基于浏览器环境渲染页面后分析未使用的CSS，支持本地文件或远程URL。示例配置（Node.js脚本）：

  const uncss = require('uncss');
  const fs = require('fs');
  const files = ['index.html', 'about.html'];
  uncss(files, { stylesheets: ['style.css'] }, (error, output) => {
    fs.writeFileSync('cleaned-style.css', output);
  });
  

针对JS的清理方法 #

• Chrome DevTools Coverage工具
  和CSS操作一致，录制时要触发所有JS相关的交互（比如表单提交、滚动加载、按钮点击），避免漏判异步或用户触发的代码。录制完成后，可查看script.js中未执行的代码段，优先清理明确未使用的函数和变量。
• Webpack Tree Shaking
  如果项目使用Webpack，确保代码采用ES模块（import/export）而非CommonJS（require），在webpack.config.js中设置mode: 'production'，Tree Shaking会自动移除未被引用的代码。若需更精细控制，可配置sideEffects字段标记无副作用的文件。
• ESLint 未使用代码检测
  启用原生的no-unused-vars规则，或搭配eslint-plugin-unicorn增强检测能力，在编辑器中实时发现未使用的变量、函数和类。注意动态调用的代码（如window[functionName]）无法被静态检测到，需结合手动排查。
• 代码拆分先行
  若暂时无法彻底清理，先将script.js按页面或功能拆分为多个小文件（比如home.js、checkout.js），迁移时仅引入目标页面所需的文件，后续再逐步清理每个文件中的冗余代码。

关键注意事项 #

• 操作前务必备份原文件，避免误删核心代码导致功能崩溃。
• 清理完成后，要在所有页面、不同浏览器及设备上测试，重点验证动态加载内容、交互功能的正常运行。
• 对于依赖用户交互或AJAX生成的内容，必须在工具录制过程中触发对应场景，否则工具会误判为未使用代码。

内容的提问来源于stack exchange，提问作者S Kartic