用PurgeCSS清除无用的css，用谷歌浏览器开发者工具中的coverage清除无用的js

网上有很多漂亮的网站模板，好看但是含太多无用的css和js，下面两种工具或许能够帮一些忙。

一是用PurgeCSS清理css，下面介绍使用方法。详细用法可以移步 https://www.purgecss.cn/ ，我这里只介绍简单用法。

安装：

npm i -g purgecss

使用：

在目录下先建一个配置文件，名为purgecss.config.js，在里面将html和css写上，例子如下

module.exports = {
  content: ['*.html'],
  css: ['css/*.css']
}

再在目录下建立一个目录用以存放精简的css，本例中我起名style，然后再使用命令行

purgecss --config ./purgecss.config.js --output style/

运行完成，就看到style目录下面生成了一些精简后的css

清理完css后感觉清爽多了，不过仍然要测试一下不同分辨率下的显示和一些效果的显示。

谷歌浏览器开发者工具中的coverage清除无用的js，实际上coverage不是清除js用的，是显示js的使用率和无用代码的。

这个使用很简单，打开这个网页，然后打开开发者工具，在开发者工具中找到More tools-> coverage，如下图

打开后，点reload button，重新加载页面，然后就可以看到各css和js的使用率了，其实这个也可以用来手动清理css

来源：oschina

链接：https://my.oschina.net/u/3782143/blog/3186432