授权协议: MIT
开发语言: JavaScript
操作系统: 跨平台
收录时间: 2018-01-29
提 交 者: 周其

当你建立一个网站的时候,你可能会大量使用像Bootstrap,Materializecss,Foundation这样的框架,但是你只会使用其中的一小部分,而且这部分还包括了大量的多余的CSS样式。Purgecss起作用了,Purgecss会分析你的内容和你的css文件。然后将文件中使用的选择器与内容文件中的选择器相匹配。再从CSS中删除未使用的选择器,是的css文件变得更小。

入门:

安装

npm i --save-dev purgecss

使用

import Purgecss from 'purgecss'
const purgeCss = new Purgecss({
  content: ['**/*.html'],
  css: ['**/*.css']
})
const result = purgecss.purge()

使用自定义提取器:

import Purgecss from 'purgecss'
import purgeHtml from 'purge-from-html'
const purgeCss = new Purgecss({
  content: ['**/*.html'],
  css: ['**/*.css'],
  extractors: [
    {
      extractor: purgeHtml,
      extensions: ['html']
    }
  ]
})
const result = purgecss.purge()
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

purgecss 的相关资讯

还没有任何资讯

purgecss 的相关博客

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

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

前端每天进步一点点-20190802

Vue使用小技巧 使用 @hook 监听子组件的生命周期钩子,比如: <Child @hook:mounted="childMounted" @hook:created="childCr...

webpack-进阶

一、编写可维护的webpack构建配置 1. 通过多个配置文件管理不同环境的webpack配置 基础配置:webpack.base.js 开发环境:web...

优化 Webpack 的构建速度

1、使用高版本的 Webpack 和 Node.js 2、多进程/多实例构建:HappyPack(不维护了)、thread-loader 3、压缩代码 webpack-para...

webpack打包优化

本文将从打包分析,速度优化,体积优化三个方面进行阐述 打包分析 初级分析: webpack内置的stats(构建的统计信息) 可以在 pa...

webpack打包优化

本文将从打包分析,速度优化,体积优化三个方面进行阐述 打包分析 初级分析: webpack内置的stats(构建的统计信息) 可以在 pa...

玩转webpack笔记

1.自动清理构建目录产物 rm -rf ./dist && webpack 或者 rimraf ./dist && webpack clean-webpack-plugin(插件) { plugin...

vue -- 7 个 有用的 Vue 开发技巧

1 状态共享 随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果...

7个有用的Vue开发技巧

作者 | skinner 链接 | https://juejin.im/post/5ce3b519f265da1bb31c0d5f 1、状态共享 随着组件的细化,就会遇到多组件状态共...

从0搭建自己的webpack开发环境(五)

往期回顾: 从0搭建自己的webpack开发环境(一) 从0搭建自己的webpack开发环境(二) 从0搭建自己的webpack开发环境(三) ...

purgecss 的相关问答

还没有任何问答,马上提问

评论 (0)

加载中
更多评论
0 评论
1 收藏
分享
在线直播报名
返回顶部
顶部