精简CSS代码，提升前端性能:实战优化技巧

在上篇文章前端性能优化秘籍：掌握CSS选择器的正确姿势中，介绍了CSS选择器的使用方式，下面了解下优化技巧。

CSS，作为构建网页视觉表现的核心技术之一，它的优化对于提升前端性能尤为关键。然而，随着项目规模的扩大和功能的增多，CSS代码往往会变得冗长和难以维护，这不仅增加了页面的加载时间，还可能影响页面的渲染效率和用户体验。

精简CSS代码，并不是简单地减少代码行数，而是一个全面审视和重构CSS使用方式的过程。它要求我们深入理解CSS的选择器、属性和布局原理，通过精心设计和优化，去除多余的代码，减少浏览器的解析负担，从而提升页面的加载速度和渲染性能。

本文将探讨一系列实用的CSS精简技巧和最佳实践，从基础的代码编写规范到高级的性能优化策略，旨在帮助开发者深入理解如何通过精简CSS代码来提升前端性能。我们将一起学习如何构建更高效、更快速且易于维护的Web前端项目。

精简CSS代码是前端性能优化的重要步骤，因为它直接关系到页面加载时间和渲染效率。以下是一些实用的技巧来精简CSS代码并提升前端性能：

使用简写属性 ：利用CSS的简写属性，例如margin、padding、border等，以减少代码量。

CSS简写属性可以帮助你更高效地编写样式代码。以下是一些常用的CSS简写属性示例：

margin和padding的简写：

css 复制代码

/* 一个值：所有边都使用这个值 */
margin: 10px;
padding: 10px;

/* 二个值：第一个值是上下，第二个值是左右 */
margin: 5px10px;
padding: 5px10px;

/* 三个值：上，左右，下 */
margin: 1px2px3px;
padding: 1px2px3px;

/* 四个值：上，右，下，左 */
margin: 1px2px3px4px;
padding: 1px2px3px4px;

border的简写：

css 复制代码

/* 一次性设置border的宽度、样式和颜色 */
border: 1px solid #000;

background的简写：

css 复制代码

/* 一次性设置背景的颜色和图片，可以设置多个背景图片 */
background: #fffurl(image.png) no-repeat center;

font的简写：

css 复制代码

/* 一次性设置字体的样式、粗细、大小和行高 */
font: italic bold 16px/1.5'Arial', sans-serif;

list-style的简写：

css 复制代码

/* 一次性设置列表的图片、位置和样式 */
list-style: square inside url(bullet.png);

简写属性可以帮助你减少代码量，并使样式更加集中和清晰。

避免重复样式：

审查CSS代码，删除重复的选择器和属性声明。
合理使用继承（inheritance）和组合（composition）。

例如，假设我们有一个网站，其中的按钮在多个页面上具有相同的基本样式，但在某些情况下可能需要一些额外的样式。我们可以这样写CSS：

css 复制代码

/* 基础按钮样式 */
.button {
     padding: 10px20px; 
     border: 1px solid #000;  
     text-align: center;  
     cursor: pointer;
}

/* 特殊按钮样式 */
.button--special {  
    background-color: #f00;  
    color: #fff;
}

在HTML中，我们可以这样使用：

css 复制代码

<buttonclass="button">普通按钮</button>
<buttonclass="button button--special">特殊按钮</button>

这种方法通过合理使用类的组合，避免了在普通按钮上应用--special类所带来的不必要的重写，从而减少了代码冗余。

压缩CSS：使用工具如CSSNano、Clean-CSS或Webpack的CSS压缩插件来移除空格、注释和换行符，减小文件大小。

例如，使用Webpack的CSS压缩插件css-minimizer-webpack-plugin 来完成 CSS 样式文件的压缩。

要使用该插件，必须现先在本地安装它：

css 复制代码

css复制代码npm install css-minimizer-webpack-plugin --save-dev

只安装没有用，要使用该插件能够生效，我们必须在 webpack.config.js 配置文件进行配置。需要注意，这个插件不是在 plugin（插件）中进行配置，而是在optimization（优化）中进行配置。

ini 复制代码

// webpack.config.js
const CssMinimizerPlugin= require("css-minimizer-webpack-plugin");
module.exports = {    
    optimization: {        
        minimizer: [                  
            new CssMinimizerPlugin(),       
        ],      
    },
}

编译打包，打开 .css样式文件，发现 CSS 样式文件已经被压缩。默认情况下仅在生产环境开启 CSS 优化。如果还想在开发环境下启用 CSS 优化，需要在 webpack.config.js 配置文件中将 optimization.minimize 设置为 true。

ini 复制代码

const CssMinimizerPlugin= require("css-minimizer-webpack-plugin");
module.exports = {      
    optimization: {        
        minimizer: [                  
            new CssMinimizerPlugin(),        
        ],       
        minimize:true,      
    },
}

移除未使用的CSS：使用Chrome DevTools的Coverage工具或其他类似工具来分析并移除未使用的CSS代码。并利用purgecss去除多余的css。

安装purgecss-webpack-plugin：

css 复制代码

npm i purgecss-webpack-plugin -D

其次，需要安装mini-css-extract-plugin

css 复制代码

npm i mini-css-extract-plugin -D

最后，它还需要glob（一般自带，不用安装），或者glob-all（推荐使用）。

css 复制代码

npm i glob-all -D

基本配置

下面修改配置文件webpack.config.js:

javascript 复制代码

const path =require('path')
const glob = require('glob')
const glob =require('glob-all')
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
const PurgecssPlugin=require('purgecss-webpack-plugin')
module.exports={
    mode:'production',
    plugins:[
        new PurgecssPlugin({
            paths: glob.sync([
                path.join(__dirname,'./html/*.html'),
                path.join(__dirname,'./src/*.js'),
                path.join(__dirname,'./src/*.ts'),
            ],{
                nodir:true
            })
        }),
        new MiniCssExtractPlugin({
            filename:'css/[name].[hash:8].css',
        }),
    ],}

在这个配置中，需要指定Purgecss的paths，这个glob-all可以设置多条路径，更加方便一些。这些路径是用来指定css使用的位置途径的。也就是说css删减的标准。

运行结果

为了显示它的特别效果。用了一个bootstrap框架，来看看它的css清理效果。就使用一个小组件，目标就是仅仅保留这个小组件的css存在，以最终达到瘦身的目的。代码如下： npm安装bootstrap:

css 复制代码

npm i bootstrap -D

./src/main.js引入bootstrap.css:

go 复制代码

import'bootstrap/dist/css/bootstrap.css';

./html/index.html模版，引入个按钮用例：

ini 复制代码

<buttontype="button"class="btn btn-lg btn-success">Success</button>

执行结果对比：

操作	size
`bootstrap.css`原版	193kb
开启`sourcemap`关闭`purgecss`	483kb
开启`sourcemap`和`purgecss`	4.78kb
关闭`sourcemap`开启`purgecss`	4.59kb

使用CSS重置或归一化：采用CSS重置（reset）或归一化（normalize）来减少浏览器默认样式的差异。

以下是一个简单的CSS重置示例，它会移除常见元素的默认margin和padding，并设置了默认字体和背景：

css 复制代码

/* CSS Reset */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {    
    margin: 0;    
    padding: 0;    
    border: 0;    
    font-size: 100%;    
    font: inherit;    
    vertical-align: baseline;    
    box-sizing: border-box; 
    /* Ensure padding and borders are included in element sizes */    
    -webkit-font-smoothing: antialiased; 
    /* Improve text rendering on Webkit browsers */
}

/* HTML5 display-role reset for older browsers */
article, 
aside, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
menu, 
nav, 
section {    
    display: block;
}

body {    
    line-height: 1;
}

ol, ul {    
    list-style: none;
}

blockquote, q {    
    quotes: none;
}

blockquote:before, 
blockquote:after,
q:before, 
q:after {    
    content: '';    
    content: none;
}

table {    
    border-collapse: collapse;    
    border-spacing: 0;
}
/* Custom styles */
body {    
    font-family: 'Arial', sans-serif;    
    background-color: #fff;    
    color: #333;
}

异步加载非关键CSS：对于非首屏渲染的CSS，可以异步加载，以减少首屏加载时间。

在现代浏览器中，可以使用<link>标签的rel="preload"属性来异步加载非关键CSS。以下是一个示例代码：

xml 复制代码

<!DOCTYPE html><htmllang="en"><head>    <metacharset="UTF-8">    <metaname="viewport"content="width=device-width, initial-scale=1.0">    <title>异步加载CSS</title>    <!-- 异步加载样式表 -->    <linkrel="preload"as="style"href="style.css"onload="this.onload=null;this.rel='stylesheet'">    <noscript><linkrel="stylesheet"href="style.css"></noscript>    <!-- 其他关键样式 -->    <style>        /* 关键CSS */        body { background-color: #fff; }    </style></head><body>    <h1>Hello World</h1></body></html>

在这个例子中，<link rel="preload">被用来异步加载style.css文件。当加载完成时，通过 JavaScript 的onload事件处理函数将link标签的rel属性从preload更改为stylesheet，这样浏览器就会应用该样式表。<noscript>标签中的<link>是为不支持 JavaScript 的环境准备的后备方案。

关键CSS内联 ：将影响首屏渲染的关键CSS内联到HTML文档的<head>中，减少外部请求。

xml 复制代码

<head>   
    <style>        
    /* 关键CSS规则 */        
    body{font-family: sans-serif;color:#111;}        
    .header{background-color:#333;color:white;}       
    </style>
</head>

代码分割：对于大型应用，可以使用代码分割技术将CSS分割成多个小块，按需加载。

以下是使用Sass和Webpack进行CSS分割的简单示例：

- 安装必要的包：

css 复制代码

npm install sass-loader sass webpack --save-dev

- 创建一个Sass文件，并使用@import进行分割：

scss 复制代码

//styles/main.scss
@import"variables";
@import"mixins";
@import"components/button";
@import"components/header";
@import"layout/grid";

- 创建分割的Sass部分：

less 复制代码

// styles/variables.scss
$primary-color: blue;

// styles/mixins.scss
@mixin button-style 
{  
    /* Button style */
}

// styles/components/button.scss
@import"mixins";
.button { 
    @include button-style;  
    color: $primary-color;
}

// styles/components/header.scss
.header {  /* Header style */}

// styles/layout/grid.scss
.grid {  /* Grid style */}

- 配置Webpack以使用split-chunks插件进行代码分割：

css 复制代码

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {  
    entry: './src/index.js',  
    output: {    filename: 'bundle.js',  },  
    module: {    
        rules: [      
            {        
                test: /.scss$/,        
                use: [         
                    MiniCssExtractPlugin.loader,          
                    'css-loader',          
                    'sass-loader',        
                ],      
            },    
        ],  
    },  
    plugins: [    
        newMiniCssExtractPlugin({filename: 'styles.css',}),  
    ],  
    optimization: {    
        splitChunks: {      
            cacheGroups: {        
                styles: {          
                    name: 'styles',          
                    test: /.scss$/,          
                    chunks: 'all',          
                    enforce: true,        
                },      
            },    
        },  
    },
};

利用CSS预处理器：使用Sass或Less等预处理器的变量、混合（mixins）、函数等特性来提高代码复用性。

Sass 变量：

css 复制代码

// 在Sass中，变量以$符号开始
 
 $primary-color: #3bbfce;
 $margin: 16px;
 
 .content-navigation {
   border-color: $primary-color;
   color: darken($primary-color, 10%);
 }

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $primary-color;
}

混合（Mixins）:

less 复制代码

// 混合允许你定义一个可重用的代码块：
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

函数:

less 复制代码

 // Sass也允许你定义自己的函数：
 @function pow($base, $exponent) {
   $result: 1;
   @for $_ from 1 through $exponent {
     $result: $result * $base;
   }
   @return $result;
 }
  
.sidebar {
  width: pow(2, 3) * 1px; // 8px
}

Less 变量:

less 复制代码

// 在Less中，变量也是以@符号开始：
 @primary-color: #3bbfce;
 @margin: 16px;
 
 .content-navigation {
   border-color: @primary-color;
   color: darken(@primary-color, 10%);
 }
 
.border {
  padding: @margin / 2;
  margin: @margin / 2;
  border-color: @primary-color;
}

混合（Mixins）

less 复制代码

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
      -ms-border-radius: @radius;
          border-radius: @radius;
}

.box { .border-radius(10px); }

函数

less 复制代码

// Less中的函数通常是内置的，用于处理颜色和数学运算等：
@base: 5%;
.calculate(@value) {
  width: (@value * @base);
}

.container {
  .calculate(20); // 计算后的宽度为 100%
}

在这些例子中，我们可以看到Sass和Less都提供了强大的工具来帮助开发者编写更加高效和模块化的CSS代码。通过使用变量、混合和函数，可以减少重复代码，使样式表更加易于维护和扩展。

总结：

在这些例子中，我们可以看到Sass和Less都提供了强大的工具来帮助开发者编写更加高效和模块化的CSS代码。通过使用变量、混合和函数，可以减少重复代码，使样式表更加易于维护和扩展。

除上述之外，我们还可以通过其它方法来进行优化，例如：

利用CDN服务分发CSS文件，并设置合适的缓存策略。
通过构建工具自动化压缩、合并和优化CSS的过程。

定期使用PageSpeed Insights、Lighthouse等工具监测网站性能，识别CSS性能瓶颈。

通过实施这些策略，可以显著减少CSS代码的体积，加快页面加载速度，提升用户体验。

感谢阅读本文，希望它能为你提供一些启发和帮助。欢迎留言分享您的看法和经验。