用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