使用 Vite 和 PurgeCSS 删除 Bootstrap 5 未使用的 CSS

在网站开发领域,优化是关键。Bootstrap 是构建响应式网站的热门选择,但其默认的 CSS 和 JS 捆绑程序往往包含大量未使用的代码,导致捆绑程序的大小较大。在这篇博文中,我们将指导您使用 Bootstrap 5 Vite,结合 PurgeCSS,移除这些未使用的 CSS,从而创建更高效、更优化的制作捆绑包。

开始之前

要开始这一优化过程,请确保您已按照官方的 Bootstrap + Vite 入门指南设置了您的项目。完成后,您的项目结构应类似于以下项目结构:

my-project/
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│   |   └── styles.scss
|   └── index.html
├── package-lock.json
├── package.json
└── vite.config.js

添加示例页面

为了说明优化过程,我们将使用 Bootstrap 的官方定价示例页面。您可以在本博文提供的 GitHub gist 中找到示例代码。根据 gist 更新您的 index.html 和 main.js 文件。完成这些更改后,运行以下命令:

npm run start

如果一切配置正确,您应该可以在 http://localhost:8080 上查看定价示例页面。您可以使用右下角的下拉菜单切换暗模式,以验证其功能是否符合预期。

初始捆绑包体积

要了解 CSS 捆绑程序的当前状态,请运行以下命令:

npm run build

该命令将提供 CSS 和 JS 捆绑包的大小信息,以及任何相关警告。就我们的目的而言,我们主要关注 CSS 捆绑包的大小,它应该在 225KB 左右,压缩后为 30KB。

> vite@1.0.0 build
> vite build

vite v4.4.9 building for production...
✓ 63 modules transformed.
../dist/index.html                  17.57 kB │ gzip:  4.02 kB
../dist/assets/index-4c3504b5.css  225.78 kB │ gzip: 30.41 kB
../dist/assets/index-6b154ba0.js    83.95 kB │ gzip: 25.47 kB
✓ built in 1.52s

SASS 优化(Bootstrap 方式)

Bootstrap 5 由多个 Sass 模块组合而成。在 style.scss 中导入 @import "bootstrap/scss/bootstrap"; 包含了 Bootstrap 提供的所有模块。现在,根据您对 Bootstrap 组件的使用情况,您可以只选择您需要的组件。模块的完整列表可以在此 Github 链接中找到: 现在按以下步骤更新 scss/style.scss

// Import all of Bootstrap's CSS
@import "bootstrap/scss/mixins/banner";
@include bsBanner("");

// scss-docs-start import-stack
// Configuration
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Layout & components
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/card";

// Helpers
@import "bootstrap/scss/helpers";

// Utilities
@import "bootstrap/scss/utilities/api";
// scss-docs-end import-stack

在更新后的 style.scss 中,我们只挑选了定价页面所需的组件。现在让我们检查构建大小,运行以下命令:

npm run build

现在,编译大小应减小到 128KB 左右,压缩后的大小应为 18KB。

> vite@1.0.0 build
> vite build

vite v4.4.9 building for production...
✓ 63 modules transformed.

../dist/index.html                  17.57 kB │ gzip:  4.02 kB
../dist/assets/index-7612d63d.css  128.50 kB │ gzip: 18.44 kB
../dist/assets/index-d8184fb8.js    83.95 kB │ gzip: 25.47 kB
✓ built in 1.38s

复制生产环境

我们得到的 gzip 指标在生产环境中可能并不相同。为此,我们需要在服务器上启用 gzip 压缩。生产环境中的服务器设置可能不同,可能是 Nginx 或 Apache 服务器,它们大多默认启用了 gzip 压缩。为了在本地获得更真实的捆绑包大小结果,我们将设置一个本地 Express.js 服务器并进行压缩。首先使用以下命令安装 Express 和压缩:

npm install express compression

接下来,在项目目录中创建一个 index.js 文件,并添加以下代码:

const express = require('express');
const compression = require('compression');

const app = express();
const port = 3000; // You can change this to any port you prefer

app.use(compression()); // Enable gzip compression
app.use(express.static('dist')); // Serve static files from the 'public' directory

// Start the server
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

这段代码会设置一个 Express.js Web 服务器,从 “dist “目录中提供静态文件,并压缩响应。它通过 3000 端口监听,服务器启动时会显示一条信息。

更新 package.json 文件,加入 “Express “脚本:

{
  // ...
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "express": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}

一切就绪后,运行以下命令构建项目并启动 Express 服务器:

npm run build && npm run express

访问 http://localhost:3000 页面,右键单击并选择 “检查”,然后导航到检查器中的网络选项卡。刷新页面后,您应该可以看到 index.css 的大小,现在应该在 18 KB 左右。

配置 PurgeCSS(小心谨慎)

PurgeCSS 是一个很有价值的工具,可用于消除项目中未使用的 CSS。在使用 PurgeCSS 之前,请确保你非常清楚哪些类和组件是必需的。因为 PurgeCSS 很可能会删除一些与状态相关的类,如下拉菜单状态和动画。

PurgeCSS 会查找 HTML 中使用的类列表,并据此删除那些未使用的类。这时,你需要使用安全列表来根据使用情况进行微调。配置 PurgeCSS 和 Vite。请按照以下步骤操作

首先,使用以下命令安装插件:

npm i --save-dev @fullhuman/postcss-purgecss

然后在项目根目录下创建一个新文件 purgecss.config.js,内容如下:

module.exports = {
    content: ['./src/**/*.html'],
    css: ['./dist/assets/**/*.css'],
    safelist: {
        deep: [/dropdown-menu$/]
    },
};

上面的 purgecss.config.js 描述了在 HTML 和 CSS 文件中查找需要优化的使用类的位置,以及下拉菜单的安全列表。正如我之前所说,这个安全列表可能与你的情况不同。您需要进行试验,确保使用 PurgeCSS 处理后一切正常。有关安全列表的更多详情,请查阅插件文档

然后,更新 pacakge.json 脚本部分,如下所示:

{
  // ...
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "optimize-css": "purgecss --config purgecss.config.js --output dist/assets/",
    "express": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}

现在,让我们按顺序运行以下命令:

  1. npm run build 这将使用 Vite 捆绑程序构建文件。
  2. npm run optimize-css 这将清除 HTML 中未使用的 CSS。

最后,检查最终捆绑包大小:npm run express。然后在 Inspector 中检查最终捆绑包大小应为 5.7 KB 左右(在 Chrome 浏览器中可能需要执行 shift+refresh 操作)。

结论

总之,通过移除未使用的 CSS 来优化 Bootstrap 项目,可以大大减小捆绑包的大小。按照本篇文章中概述的步骤,您可以实现更小的制作捆绑包。最初,CSS 捆绑包的大小约为 225 KB,但在实施 PurgeCSS 并进行必要配置后,最终的捆绑包大小减少到了 5.7 KB。

这种程度的优化可以大大提高网络应用程序的性能,确保生产代码中只包含必要的样式。有关详细信息和访问完整源代码的权限,请参阅所提供的 GitHub 代码库

本文文字及图片出自 Bootstrap 5 Remove Unused CSS with Vite and PurgeCSS

阅读余下内容
 

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注


京ICP备12002735号