html 清理多余样式,webpack去除冗余css样式删除多余css

webpack打包css时，一般时压缩css，但css有很多用不到类和属性，有什么办法可以除冗余css样式删除多余css，特别是在使用一些bootstrap的前端框架时，可使用purifycss和PurifyCSS-webpack去掉页面不用的多余css。

PurifyCSS

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

1.如何在webpack中使用？

1.1 安装

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

npm i -D purifycss-webpack purify-css

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

1.2 引入

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

const glob = require('glob');

(2)引入purifycss-webpack

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

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

1.3 配置plugins

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

plugins:[

new extractTextPlugin("css/index.css"),

new PurifyCSSPlugin({

// Give paths to parse for rules. These should be absolute!

paths: glob.sync(path.join(__dirname, 'src/*.html')),

})]

这里配置了一个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文件里写一些用不到的属性，比如：

#hello{

background-color: #018eea;

color: red;

font-size: 32px;

text-align: center;}

1.5 打包

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

使用webpack命令进行打包

webpack

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

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

html 清理多余样式,webpack去除冗余css样式删除多余css相关推荐

php 去除标签内样式,PHP去除html标签,php标记及css样式代码参考
语法: string strip_tags(string str); 传回值: 字串函式种类: 资料处理解析:本函式可去掉字串中包含的任何 HTML 及 PHP 的标记字串.若是字串的 HTML ...
根据html除去多余css样式在线,利用css-redundancy-checker去除冗余、无用、废弃的css样式代码...
背景为网站写CSS样式的时候,经常会遇到CSS样式的修改或者网页设计的改变,而这些网页在经过无数次的修改之后,可能有些样式已经用不到了,css文件中可能存在着一些没用的CSS代码.这些无用的CSS代 ...
webpack如何将css文件分离的,【Webpack小书】Webpack中如何将CSS样式抽取到独立文件中？ - Tim的资源站...
现在我们有一个很好的打包了,但所有的 CSS 都去了哪里?根据配置,它已被内联到 JavaScript!虽然这在开发过程中很方便,但听起来并不理想. 当前的解决方案 CSS 是无法缓存的,并且还有一个 ...
webpack使用加载器来加载CSS样式
前言: 对于webpack来说,每个文件都是一个模块,比如css.js.html.jpg等. 对于不同的模块,就得需要不同的加载器(Loaders)来处理,所以加载器是webpack最重要的功能. 安 ...
webpack 打包html中css样式如果处理,webpack中单独打包css样式
这次给大家带来webpack中单独打包css样式,webpack中单独打包css样式的注意事项有哪些,下面就是实战案例,一起来看一下. 零.介绍以下是个人项目中总结出来的一些基本知识,记录在这里,加 ...
仿站利器！一键去除冗余css
项目开发过程中,前端设计改来改去,这时往往会先把新的效果做出来,等项目做完,就会有一些遗弃的 CSS代码.或者扒站的时候,有时候只是想扒一点小地方,如果一点一点的扒对应的CSS也是不小的工作量. 这时 ...
PC端和移动APP端CSS样式初始化
CSS样式初始化分为PC端和移动APP端 1.PC端:使用Normalize.css Normalize.css是一种CSS reset的替代方案. 我们创造normalize.css有下面这几个目的 ...
样式处理——去除无用样式
前提说明去除无用样式就是去除样式中没有用到的 CSS 样式,这样有助于代码的优化,减少不必要样式代码的加载. 去除无用样式需要用到的模块: purify-css purifycss-webpack ...
HTML标签+CSS样式（一）
文章目录一.HTML常用标签类二.CSS常用样式一.HTML常用标签类 html:hyperText markup language,超文本标记语言 1. < meta > 告诉搜索 ...

html 清理多余样式,webpack去除冗余css样式删除多余css

html 清理多余样式,webpack去除冗余css样式删除多余css相关推荐

最新文章

热门文章

html 清理 多余 样式,webpack去除冗余css样式删除多余css

html 清理 多余 样式,webpack去除冗余css样式删除多余css相关推荐

最新文章

热门文章

html 清理多余样式,webpack去除冗余css样式删除多余css

html 清理多余样式,webpack去除冗余css样式删除多余css相关推荐