在平时的项目开发中,我们会引入一些框架,比如:Bootstrap,但是在项目中通常我们只使用它的一小部分,还有部分是冗余的。更有甚有时候需求更改,带来DOM结构的更改,这时候我们可能无暇关注CSS样式,会造成很多冗余的CSS。我们得想办法消除冗余的CSS,如果靠人工去剔除,吃力又容易出错,因此,此节我们来学习一下用webpack如何消除未使用的CSS

PurifyCSS

使用PurifyCSS可以大大减少CSS冗余,消除框架中未使用的CSS,初步达到按需引入的效果。

1.如何在webpack中使用?

1.1 安装

安装PurifyCSS-webpack插件,PurifyCSS-webpack是依赖于purify-css这个包的,所以这两个都需要安装。这里采用npm安装(也可采用cnpm安装)

  1. npm i -D purifycss-webpack purify-css

-D:是–save-dev的一个简写。

1.2 引入

(1)因为我们需要同步检查html模板,所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。

  1. const glob = require('glob');

(2)引入purifycss-webpack

同样在webpack.config.js文件头部引入purifycss-webpack

  1. const PurifyCSSPlugin = require("purifycss-webpack");

1.3 配置plugins

引入完成后我们需要在webpack.config.js里配置plugins。代码如下

  1. plugins:[
  2. new extractTextPlugin("css/index.css"),
  3. new PurifyCSSPlugin({
  4. // Give paths to parse for rules. These should be absolute!
  5. paths: glob.sync(path.join(__dirname, 'src/*.html')),
  6. })
  7. ]

这里配置了一个paths,主要是需找html模板,purifycss根据这个配置会遍历你的文件,查找哪些css被使用了。

注意:使用这个插件必须配合extract-text-webpack-plugin这个插件且extract-text-webpack-plugin插件必须在purifycss-webpack之前引入,extract-text-webpack-plugin插件相关知识点前面已经说过了。

1.4 编写css代码

配置好上边的代码,我们可以故意在src/css/index.css文件里写一些用不到的属性,比如:

  1. #hello{
  2. background-color: #018eea;
  3. color: red;
  4. font-size: 32px;
  5. text-align: center;
  6. }

1.5 打包

此处打包分为两种情况:一是使用了插件配置后的打包,另一个是未使用插件配置的打包(删除或注释plugins中的PurifyCSSPlugin配置),主要是对比有无插件的打包情况。

使用webpack命令进行打包

  1. webpack

结果1-----无插件样式都被打包了:



结果2:----有插件,多余样式没有被打包:

此节只是对如何使用这个插件做了简单的描述,更多其他的一些相关配置要求,需逐步深入。有什么问题,欢迎留言!!

(14/24) css进阶:(入门)去除冗余的css的更多相关文章

  1. 【WEB基础】HTML & CSS 基础入门(9)CSS盒子

    网页上的元素辣么多,我该用什么办法让它们排列整齐.间距合理呢.常干家务的朋友们就容易理解了,用收纳盒呀! 所以用CSS做网页布局就涉及一个盒子的概念,简单理解,我们可以把页面上的所有HTML元素看作一 ...

  2. css进阶----盒子模型,Reset CSS,css浮动,css定位,z-index属性

    盒子模型 把页面上的每一个元素当成一个盒子 由内容,内边距,边框,外边距组成 盒子模型举例 <!DOCTYPE html> <html lang="en"> ...

  3. CSS进阶内容—盒子和阴影详解

    CSS进阶内容 在学习了CSS基本知识之后,我们需要进一步了解CSS,因此写下了这篇文章 当然如果没有学习之前的知识,可以到我的主页中查看之前的文章:秋落雨微凉 - 博客园 CSS三大特性 首先我们先 ...

  4. webpack快速入门——CSS进阶:消除未使用的CSS

    使用PurifyCSS可以大大减少CSS冗余 1.安装 cnpm i purifycss-webpack purify-css --save-dev 2.引入glob,因为我们需要同步检查html模板 ...

  5. webpack快速入门——CSS进阶:自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  6. webpack快速入门——CSS进阶,Less文件的打包和分离

    1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...

  7. webpack快速入门——CSS进阶:SASS文件的打包和分离

    1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...

  8. CSS进阶之SASS入门指南

    CSS进阶之SASS入门指南         随着跟着公司学习项目的前端的推进,越来越对好奇了许久的SASS垂涎欲滴,哈哈,可能这个词使用不当,没有关系,就是对SASS有一股神秘的爱!好了,闲话不多说 ...

  9. 去除冗余 – 精简您的CSS样式代码

    讲讲常见的一些没有必要使用CSS代码情况,而这些不起作用可以去掉的CSS代码可能是我们经常忽视的.越是对CSS理解不够,越容易出现这些问题. 二.一些常见不必要CSS样式 1.与默认CSS样式一致 我 ...

随机推荐

  1. concat_ws 使用在hive spark-sql上的区别

    concat_ws() 在hive中,被连接对象必须为string或者array<string>,否则报错如下: hive> select concat_ws(',',unix_ti ...

  2. javascript获取某个月份的天数

    function DayNumOfMonth(Year,Month)      //例DayNumOfMonth(2017,05);{ Month--;   //月份是0~11.month=4 var ...

  3. delphi的流操作的语法

    Delphi在这两方面都做的相当出色.在Delphi的早期版本Turbo Pascal 中就曾有流(Stream).群(Collection)和资源(Resource)等专门用于对象式数据管理的类.在 ...

  4. CentOS7虚拟机克隆,且成功互ping

    第一步:克隆 https://blog.csdn.net/mijichui2153/article/details/80918285 打开VMware,确认已经完成安装配置的CentOS7虚拟机在关闭 ...

  5. 学习笔记TF056:TensorFlow MNIST,数据集、分类、可视化

    MNIST(Mixed National Institute of Standards and Technology)http://yann.lecun.com/exdb/mnist/ ,入门级计算机 ...

  6. windows远程登录报错 CredSSP不支持Oracle

    https://support.microsoft.com/en-us/help/4093492/credssp-updates-for-cve-2018-0886-march-13-2018

  7. 20165308『网络对抗技术』Exp5 MSF基础应用

    20165308『网络对抗技术』Exp5 MSF基础应用 一.原理与实践说明 实践内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 一个主动攻击实 ...

  8. 【凡尘】---react-redux---【react】

    一.Redux与组件 react-redux是一个第三方插件使我们在react上更方便的来使用redux这个数据架构 React-Redux提供connect方法,用于从UI组件生成容器组件,conn ...

  9. java 类的初始化顺序

    有父类 1. 父类static成员变量 2. 父类static块 3. 父类非static成员 4. 父类非static块 5. 父类构造方法 子类,也按照1-5顺序执行 无父类 1. static成 ...

  10. stm32之中断配置

    一.stm32的中断和异常 Cortex拥有强大的异常响应系统,它能够打断当前代码执行流程事件分为异常和中断,它们用一个表管理起来,编号为0~15为内核异常,16以上的为外部中断,这个表就是中断向量表 ...