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

用PurgeCSS清除无用的css,用谷歌浏览器开发者工具中的coverage清除无用的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