Webpack 优化实践:CSS 压缩篇

前言

Webpack 是一个很强大的模块打包工具,能够帮助前端工程师进行模块化开发、代码跨浏览器的兼容性、文件打包、压缩等。然而,Webpack 作为一个高度可配置的工具,当我们没有进行配置时,我们得到的代码往往都是未经优化的。

在本文中,我们将讲解如何通过使用 Webpack 进行 CSS 压缩和优化,以便更好地优化我们的 Web 应用程序。

什么是 CSS 压缩?

CSS 压缩并不是像文件压缩或图片压缩那样简单直接的概念。相反,CSS 压缩是指通过编写更短、更有效的 CSS 代码来消除多余的空格、注释和其他不必要的字符。

例如:

----------
---- -
    ------- - - ----- 
    -------- --
-

--- --- -- -
    ---------- -----
    ------ ----- 
    ----------- -------
-

---------- -
    ------ -----
    ------- - ----- 
    -------- -----
    ----------------- --------
-

经过 CSS 压缩后,我们将得到:

------------- - -------------------------------------------------------------------------------------------------- -------------------------------------------

CSS 压缩使文件更小,从而减少加载时间,从而提高 Web 应用程序的效率和性能。

如何在 Webpack 中使用 CSS 压缩?

为了在 Webpack 中开启 CSS 压缩,我们需要通过使用一些 Webpack 插件实现。以下是我们可以使用的一些 Webpack 插件:

1. css-minimizer-webpack-plugin

css-minimizer-webpack-plugin 是 webpack 官方维护的一个插件,它使用 cssmin 来压缩 CSS。

----- ------------------ - ----------------------------------------

-------------- - -
    -----
    ------------- -
        --------- -----
        ---------- -
            --- --------------------
        -
    -
    -----
--

2. optimize-css-assets-webpack-plugin

optimize-css-assets-webpack-plugin 是第三方插件,它使用 cssnano 去处理优化和压缩 CSS。

----- ----------------------- - ----------------------------------------------

-------------- - -
    -----
    ------------- -
        --------- -----
        ---------- -
            --- -------------------------
        -
    -
    -----
--

上面两个插件都可以在 Webpack 中用来压缩 CSS,但是我们如何选择呢?那么下面是这两个插件的区别:

  • css-minimizer-webpack-plugin 是正式的 webpack 插件,因此它是官方支持的,并且可以很好地与其他 webpack 插件配合使用。
  • optimize-css-assets-webpack-plugin 是第三方插件,因此它可能有不同的特性和性能。

CSS 压缩插件的配置

cssnano 是一个强大的 CSS 处理器,它支持各种优化技术,如压缩,适当栅格化,优化选择器等。为了使用它,我们将安装以下两个软件包:

--- ------- ------- ----------
--- ------- -------------- ----------

安装完成后,我们需要将 postcss-loader 添加到我们的 Webpack 配置文件中,并在其中引用 cssnano

----- ------------------ - ----------------------------------------
----- ------- - -------------------
 
-------------- - -
    -----
    ------- -
        ------ -
            -
                ----- ---------
                ---- ---------------- ------------- -----------------
            -
        -
    --
    ------------- -
        --------- -----
        ---------- -
            --- --------------------
                ----------------- -
                    ------- -
                        ----------
                        -
                            ---------------- -
                                ---------- -----
                            --
                        --
                    --
                --
            ---
        --
    --
    -----
    -------- -
        --- ---------------------------------
            --------- ------
            --------- -
                ------- -----
                ---------- -----
                --------- ------
                -------------- -----
                ------------- -----
                --------- -----
                ------------- -----
                ---------- -----
                --------- -----
            --
        ---
    --
    ----
    -------- ----------
           ------- ----------
      ----
--

上述代码中,我们安装了 cssnanopostcss-loader,并在 Webpack 配置文件中添加了相应的规则和插件。此外,我们还在 CssMinimizerPlugin 中设置了 minimizerOptions 和在 postcssLoader 中设置了我们压缩的选项。

示例

以下是完整示例代码:

----- ------------------ - ----------------------------------------
----- ----------------------- - ----------------------------------------------
----- ------- - -------------------
 
-------------- - -
    ------ -----------------
    ------- -
        --------- ------------
        ----- --------- - -------
    --
    ----- -------------
    ------- -
        ------ -
            -
                ----- ---------
                ---- ---------------- ------------- -----------------
            -
        -
    --
    ------------- -
        --------- -----
        ---------- -
            --- ---------------------
            --- -------------------------
        -
    --
    -------- -
        --- ---------------------------------
            --------- ------
            --------- -
                ------- -----
                ---------- -----
                --------- ------
                -------------- -----
                ------------- -----
                --------- -----
                ------------- -----
                ---------- -----
                --------- -----
            --
        ---
    --
    -------- ----------
           ------- ----------
      ----
--

结论

CSS 压缩可以有效地减少文件的大小,从而减少加载时间,提高 Web 应用的效率和性能。在本文中,我们讨论了如何使用 Webpack 进行 CSS 压缩以及如何针对不同的 Webpack 插件进行配置。与其他优化技术一起使用,如文件缓存、代码分割等等,它可以大大提高我们的应用程序性能和优化程度。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/672080b22e7021665e028618