Tailwind CSS 在 nuxt 中使用的速度优化

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件和任何其他类名称模板，生成相应的样式，然后将它们写入静态 CSS 文件。

最近在 Nuxt 项目中加入了 Tailwind CSS，虽然带了很多便利，但随之而来的还有一些问题。如本地热更新时间变慢、打包速度变慢。特别是热更新的速度，更是每次都是50s以上甚至直接导致浏览器卡死，严重影响开发体验。

分析原因

从其原理上讲，速度变慢的原因无非是由于其要扫描、编译等等原因拖慢了热更新和打包的速度。那么解决问题的思路就准备朝着这个方向来找。

解决过程

首先肯定是阅读官方文档
官方的策略主要是限制扫描范围，就像在 Webpack 中配置 includes 一样。

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  // ...
}

上面是官方示例配置，经过测试后，emmm发现速度并没有什么特别明显的提升。

接下来看下万能的社区有没有大佬有什么方法推荐
社区推荐的主要是：

修改配置。这个第一步已经试了
开发插件提前编译css

目前tailwind影响速度主要是将其作为插件放入到postcss中，其实其自身编译并不慢。通过开发一个插件，将tailwind编译出css后再引入到项目中，就避免了在Nuxt项目中编译带来的速度过慢的问题，但这种方法带来的问题是我每次修改css后都需要编译，很明显是不能满足我们日常开发的需求的。

自力更生丰衣足食
虽然在社区中没查到完美的方法，但还是得到了一些灵感，既然是编译的时间太慢，那我能否以空间换时间呢？提前将tailwind全部的css引入项目中。

由于对tailwind使用也没多久，所以第一步先确认下有些在html中写的很复杂的class是否有修改。经过确认发现其编译仍然是打包css而已，接下来就容易了，作为一个成熟的库，怎么可能没有CDN呢，直接将官网提供的CDN链接在项目中引入即可。

export default {
  head: {
    // ...
    // 这里要注意的是链接是js 并不是css
    script: [
      { src: '//cdn.tailwindcss.com/3.3.1' }
    ]
  }
}

添加完上述代码，原有的包括nuxt.conmfig.js中的配置及scss文件中的引用都要删除掉。完成后再试一下，emm速度快了很多，特别是热更新速度基本已经没有影响。

至此，问题的解决基本已经结束，但是，打开调试发现提示并不建议在生产环境也是用cdn，这时候还需要对代码进行一下环境的判断。建议是生产环境使用postcss打包，开发环境使用cdn.