背景介绍
TailwindCSS 是一款非常流行的 CSS 框架,它提供了一系列预定义的样式类供开发者使用,可以大幅度提高开发效率。但是,使用 TailwindCSS 也会产生一些问题,最突出的就是打包后的文件大小,有时甚至会超过几十兆。这让开发者在使用 TailwindCSS 时需要更加谨慎,以避免过度的打包大小。
PurgeCSS 是一种可以帮助优化打包大小的工具,它可以扫描项目中的 HTML、CSS、JavaScript 代码,用正则表达式匹配出所有使用到的 CSS 类名,并将未使用到的类名删除,从而大幅度减少打包后的文件大小。在使用 TailwindCSS 时,我们可以结合 PurgeCSS 来优化打包体积,从而提高项目的性能。
安装 PurgeCSS
PurgeCSS 是一款基于 Node.js 的命令行工具,首先需要使用 npm 安装:
npm install -g purgecss
使用 PurgeCSS
首先,我们需要删除 tailwindcss 的默认配置文件(tailwind.config.js),并新建一个 purgecss 的配置文件(purgecss.config.js):
module.exports = { content: ['./public/**/*.html', './src/**/*.vue'], css: ['./src/**/*.css'], defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [] }
其中,content
属性指定了需要扫描的 HTML 和 Vue 文件的路径,css
属性指定了需要优化的 CSS 文件的路径。defaultExtractor
属性指定了正则表达式,用于匹配 CSS 类名,这是 PurgeCSS 整个的核心。
接下来,我们需要在打包命令中执行 PurgeCSS:
npx tailwindcss build ./src/styles.css -o ./dist/tailwind.css && purgecss -config purgecss.config.js -o ./dist/tailwind.css
这里我们将 TailwindCSS 编译后的 CSS 文件放置在 dist 目录下,并使用 PurgeCSS 进行优化。
示例代码
以下是一个使用了 TailwindCSS 的示例 HTML 文件:
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------ ------------ ----- ---------------- --------------------------- ------- ------ ---- ----------- -------------- ------------ -------- ------------- ---- -------------------- --- --------------- --------- ------------ ----------- -- -------------------- -- - ---- ---- --- ---------------- ------ ------ ------- -------
在打包后,我们可以发现 tailwind.css 文件大小从 1.5 MB 降到了 4.4 KB,大幅度减少了项目大小,从而提高了页面的加载速度和性能。
总结
在使用 TailwindCSS 开发项目时,我们需要更加谨慎地处理打包大小的问题,以避免影响项目的性能。通过结合 PurgeCSS 进行优化,我们可以在保证样式完整的前提下,大幅度减少项目的大小,提高页面的加载速度,实现更加优秀的用户体验。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/647eed7848841e9894e9c30a