如何在使用 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 文件中添加以下代码：

// www.javascriptcn.com code example
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob')

module.exports = {
  configureWebpack: {
    plugins: [
      new PurgecssPlugin({
        paths: glob.sync('./src/**/*', { nodir: true }),
        extractors: [
          {
            extractor: class {
              static extract(content) {
                return content.match(/[A-Za-z0-9-_:/]+/g) || []
              }
            },
            extensions: ['html', 'vue', '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 文件中添加以下代码：
```
// www.javascriptcn.com code example
const CssnanoPlugin = require('cssnano-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new CssnanoPlugin({
        preset: 'default'
      })
    ]
  }
}
```
这里的 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 文件中添加以下代码：

// www.javascriptcn.com code example
const PurgecssPlugin = require('purgecss-webpack-plugin')
const CssnanoPlugin = require('cssnano-webpack-plugin')
const glob = require('glob')

module.exports = {
  configureWebpack: {
    plugins: [
      new PurgecssPlugin({
        paths: glob.sync('./src/**/*', { nodir: true }),
        extractors: [
          {
            extractor: class {
              static extract(content) {
                return content.match(/[A-Za-z0-9-_:/]+/g) || []
              }
            },
            extensions: ['html', 'vue', 'js']
          }
        ]
      }),
      new CssnanoPlugin({
        preset: 'default'
      })
    ]
  }
}

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

4. 示例代码

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

// www.javascriptcn.com code example
// vue.config.js

const PurgecssPlugin = require('purgecss-webpack-plugin')
const CssnanoPlugin = require('cssnano-webpack-plugin')
const glob = require('glob')

module.exports = {
  configureWebpack: {
    plugins: [
      new PurgecssPlugin({
        paths: glob.sync('./src/**/*', { nodir: true }),
        extractors: [
          {
            extractor: class {
              static extract(content) {
                return content.match(/[A-Za-z0-9-_:/]+/g) || []
              }
            },
            extensions: ['html', 'vue', 'js']
          }
        ]
      }),
      new CssnanoPlugin({
        preset: 'default'
      })
    ]
  }
}

// www.javascriptcn.com code example
<!-- App.vue -->

<template>
  <div class="bg-gray-100 p-4">
    <h1 class="text-3xl font-bold mb-4">Hello, Tailwind!</h1>
    <p class="text-gray-700 leading-loose">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel magna
      hendrerit, malesuada sapien eu, blandit nulla. Integer euismod, diam
      eget fermentum tristique, libero sapien congue nisi, id sagittis libero
      orci at arcu. Ut euismod rutrum lorem, vel sodales justo. Donec vitae
      sagittis quam, quis placerat nisl. In sit amet quam vel velit lacinia
      efficitur. Nullam posuere porta enim, vitae finibus risus ultricies vel.
      Nulla facilisi. Nulla facilisi. Integer euismod, diam eget fermentum
      tristique, libero sapien congue nisi, id sagittis libero orci at arcu.
      Ut euismod rutrum lorem, vel sodales justo. Donec vitae sagittis quam,
      quis placerat nisl. In sit amet quam vel velit lacinia efficitur.
    </p>
  </div>
</template>

<style lang="postcss">
@tailwind base;
@tailwind components;

.bg-gray-100 {
  background-color: #f7fafc;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.font-bold {
  font-weight: 700;
}

.mb-4 {
  margin-bottom: 1rem;
}

.text-gray-700 {
  color: #4a5568;
}

.leading-loose {
  line-height: 1.875;
}

.text-center {
  text-align: center;
}
</style>

通过以上示例代码，我们可以看到如何使用 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. 示例代码

接着读