zoukankan      html  css  js  c++  java
  • (14/24) css进阶:(入门)去除冗余的css

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

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

  • 相关阅读:
    mojo 接口示例
    MojoliciousLite: 实时的web框架 概述
    接口返回json
    centos 6.7 perl 版本 This is perl 5, version 22 安装DBI DBD
    centos 6.7 perl 5.22 安装DBD 需要使用老的perl版本
    商业智能改变汽车行业
    商业智能改变汽车行业
    读MBA经历回顾(上)目的决定手段——北漂18年(48)
    perl 升级到5.20版本
    Group Commit of Binary Log
  • 原文地址:https://www.cnblogs.com/wfaceboss/p/10129019.html
Copyright © 2011-2022 走看看