如何在使用 Tailwind 时优化构建打包体积-JavaScript中文网-JavaScript教程资源分享门户

Tailwind 是一款流行的 CSS 框架，它提供了一系列的类名，可以快速地构建出具有统一风格的网页。然而，在使用 Tailwind 进行开发时，由于它提供的类名非常多，这可能会导致构建出的 CSS 文件非常大，进而影响网页的加载速度。因此，在使用 Tailwind 时，我们需要优化构建打包体积，以保证网页的加载速度。

1. 使用 PurgeCSS 进行无用 CSS 删除

在 Tailwind 中，提供的类名非常多，而我们实际使用的类名可能只有其中的一小部分。因此，在构建 CSS 文件时，我们需要将无用的类名删除，以减小 CSS 文件的体积。这个时候，我们可以使用 PurgeCSS 工具进行无用 CSS 删除。

PurgeCSS 是一款可以删除无用 CSS 的工具，它可以通过扫描 HTML、JS、Vue 等文件，来判断哪些 CSS 类名是有用的，哪些是无用的。在使用 PurgeCSS 进行无用 CSS 删除时，我们需要做以下几个步骤：

安装 PurgeCSS
```
npm install -D purgecss
```
在项目中添加 PurgeCSS 配置文件

在项目根目录下添加一个 purgecss.config.js 文件，内容如下：
```
module.exports = {
  content: ['./src/**/*.html', './src/**/*.vue', './src/**/*.jsx', './src/**/*.js'],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
}
```
这里的 content 字段表示需要扫描的文件，defaultExtractor 字段表示默认的 CSS 类名提取器。

在构建脚本中使用 PurgeCSS

在构建脚本中，我们需要使用 PurgeCSS 对 CSS 文件进行处理。这里以 Vue CLI 为例，我们可以在 vue.config.js 文件中添加以下代码：

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

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

这里的 paths 字段表示需要扫描的文件，extractors 字段表示 CSS 类名提取器。

通过以上步骤，我们就可以使用 PurgeCSS 进行无用 CSS 删除了。

2. 使用 CSS Nano 进行 CSS 压缩

在删除了无用 CSS 后，我们还可以使用 CSS Nano 进行 CSS 压缩，以减小 CSS 文件的体积。CSS Nano 是一款可以压缩 CSS 的工具，它可以将 CSS 文件中的冗余代码删除，并将 CSS 属性进行缩写。在使用 CSS Nano 进行 CSS 压缩时，我们需要做以下几个步骤：

安装 CSS Nano
```
npm install -D cssnano
```
在构建脚本中使用 CSS Nano

在构建脚本中，我们需要使用 CSS Nano 对 CSS 文件进行压缩。这里以 Vue CLI 为例，我们可以在 vue.config.js 文件中添加以下代码：
```
-- -------------------- ---- -------
----- ------------- - ---------------------------------

-------------- - -
  ----------------- -
    -------- -
      --- ---------------
        ------- ---------
      --
    -
  -
-
```
这里的 preset 字段表示 CSS Nano 的预设。

通过以上步骤，我们就可以使用 CSS Nano 进行 CSS 压缩了。

3. 使用 PurgeCSS + CSS Nano 进行无用 CSS 删除和 CSS 压缩

在使用 PurgeCSS 进行无用 CSS 删除和使用 CSS Nano 进行 CSS 压缩时，我们可以将它们结合起来使用，以减小 CSS 文件的体积。在使用 PurgeCSS + CSS Nano 进行无用 CSS 删除和 CSS 压缩时，我们需要做以下几个步骤：

安装 PurgeCSS 和 CSS Nano
```
npm install -D purgecss cssnano
```

在构建脚本中使用 PurgeCSS + CSS Nano

在构建脚本中，我们需要使用 PurgeCSS + CSS Nano 对 CSS 文件进行处理。这里以 Vue CLI 为例，我们可以在 vue.config.js 文件中添加以下代码：

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

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

通过以上步骤，我们就可以使用 PurgeCSS + CSS Nano 进行无用 CSS 删除和 CSS 压缩了。

4. 示例代码

以下是一个使用 Vue CLI 和 Tailwind 进行开发的项目，其中包含了使用 PurgeCSS + CSS Nano 进行无用 CSS 删除和 CSS 压缩的示例代码：

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

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

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

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

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

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

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

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

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

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

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

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

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

通过以上示例代码，我们可以看到如何使用 PurgeCSS + CSS Nano 进行无用 CSS 删除和 CSS 压缩，以优化构建打包体积。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d32212a941bf71345ecbd6

如何在使用 Tailwind 时优化构建打包体积

1. 使用 PurgeCSS 进行无用 CSS 删除

2. 使用 CSS Nano 进行 CSS 压缩

3. 使用 PurgeCSS + CSS Nano 进行无用 CSS 删除和 CSS 压缩

4. 示例代码

纠错反馈

程序员教程

程序员面试题库