使用 PurgeCSS 优化 TailwindCSS 的打包大小

阅读时长 4 分钟读完

背景介绍

TailwindCSS 是一款非常流行的 CSS 框架,它提供了一系列预定义的样式类供开发者使用,可以大幅度提高开发效率。但是,使用 TailwindCSS 也会产生一些问题,最突出的就是打包后的文件大小,有时甚至会超过几十兆。这让开发者在使用 TailwindCSS 时需要更加谨慎,以避免过度的打包大小。

PurgeCSS 是一种可以帮助优化打包大小的工具,它可以扫描项目中的 HTML、CSS、JavaScript 代码,用正则表达式匹配出所有使用到的 CSS 类名,并将未使用到的类名删除,从而大幅度减少打包后的文件大小。在使用 TailwindCSS 时,我们可以结合 PurgeCSS 来优化打包体积,从而提高项目的性能。

安装 PurgeCSS

PurgeCSS 是一款基于 Node.js 的命令行工具,首先需要使用 npm 安装:

使用 PurgeCSS

首先,我们需要删除 tailwindcss 的默认配置文件(tailwind.config.js),并新建一个 purgecss 的配置文件(purgecss.config.js):

其中,content 属性指定了需要扫描的 HTML 和 Vue 文件的路径,css 属性指定了需要优化的 CSS 文件的路径。defaultExtractor 属性指定了正则表达式,用于匹配 CSS 类名,这是 PurgeCSS 整个的核心。

接下来,我们需要在打包命令中执行 PurgeCSS:

这里我们将 TailwindCSS 编译后的 CSS 文件放置在 dist 目录下,并使用 PurgeCSS 进行优化。

示例代码

以下是一个使用了 TailwindCSS 的示例 HTML 文件:

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

在打包后,我们可以发现 tailwind.css 文件大小从 1.5 MB 降到了 4.4 KB,大幅度减少了项目大小,从而提高了页面的加载速度和性能。

总结

在使用 TailwindCSS 开发项目时,我们需要更加谨慎地处理打包大小的问题,以避免影响项目的性能。通过结合 PurgeCSS 进行优化,我们可以在保证样式完整的前提下,大幅度减少项目的大小,提高页面的加载速度,实现更加优秀的用户体验。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/647eed7848841e9894e9c30a

纠错
反馈