remove-unusecss v1.0.7

remove-unusecss

remove unusecss. 移除未被使用的css。在前端性能优化中，你可能会发现某个页面引入了较多或者较大的css文件，而真正用于当前页面的css只占据了一小部分，而缩减css体积正是前端性能优化的方向之一,目前有一些网站可以针对页面进行css提取，但对于动态变化的页面，其准确率就相当低了。

所以本文利用chrome coverage统计 + puppeteer自动化的方式提取更为准确的"关键css"

使用

安装

npm i remove-unusecss --save

引入

import RemoveUnusecss from 'remove-unusecss' 

使用

const config = {
    //注意检测对象一定要是单页，检测过程中不能有刷新页面的操作，否则会丢失之前的检测结果
    url: 'https://www.baidu.com/',
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1',
    viewport: {
        width: 375, height: 812
    },
    actions: [
        /* type: 类型， selector：目标dom, time: 停留时间 */
        /*
        CLICK: 点击，（按钮点击）
        TYPE: 输入，（输入框输入）
        START: 开始捕获样式
        STOP: 停止捕获样式
        */
        { type: 'CLICK', selector: '.input-wrapper' },
        { type: 'TYPE', selector: '.new-search-input' },
        { type: 'CLICK', selector: '.se-bn' },
        { type: 'START' },
    ]
}

const { useCss, unuseCss } = RemoveUnusecss.start(config) 

运行demo

✅将本项目拉下来

第一次运行demo的时候会有些慢，需要下载chromium

git clone https://github.com/twosugar/remove-unusecss.git

安装node_node_modules

npm i

npm run demo

最后会在demo-css文件目录下生成两个css

demo-css/unuse-css.css //未被使用的css
demo-css/use-css.css //已被使用的css

注意

无法得知media适配等信息，无法得知H5运行中未出现的id、className、标签等选择器对应的css