Question

前端怎么快速筛选页面没用的js和css文件

一个项目每个页面基本都引了很多css和js文件，但是有的文件是没有用，就是不需要加载也不会影响页面的布局和效果的，怎样可以快速的把这些没有使用的文件找出来，用什么工具或者方法？

Answer 1

从我用过的方法，可以从两个层面来说，不过都是没有办法100%的精准和全面的。也可能还有一些更好的方法，不过我没用过。

1. 代码检测

   对于JS，可以使用JSHint或者ESLint进行进行代码检测，可以检测到每个代码里面你定义（或者引入）但是并没有用到的变量。你可以在你的编辑器里面安装相关插件，也可以通过在每次代码提交之前进行检测。相关使用方法可以看这里：ESLint，JSHint比如：我使用VI作为编辑器，截图中使用的是ESLint:

   .

   

   .

2. 使用Chrome的 Dev Tool

   Chrome从某个版本开始加入了Coverage，打开方式：

   .

   

   .

   下图中，绿色的是页面使用到的CSS和JS代码，红色是未被使用的（注意，这里未被执行过，不代表没有用，只是代表还没被触发）：

   .

    

Answer 2

没有这样的工具，还是手工去查找删除吧