tailwindcss 打包速度优化

问题

项目中使用tailwind后run start和run build速度均慢了很多

解决

1. 自定义一个tailwind配置文件tailwind.config.js（如果已经定义就跳过这步）
   
2. 在package.json中加上依赖:"tailwindcss-cli": "^0.1.2",
3. 自定义一个webpack plugin: MyPlugin（plugin名字自己改），并放在项目跟路径下，代码如下

const childProcess = require('child_process')
// gaze是用于监听文件变化的工具
const Gaze = require('gaze');
// 有更友好展示的console
const consola = require('consola')

class MyPlugin {
  // 将 `apply` 定义为其原型方法，此方法以 compiler 作为参数
  apply(compiler) {
    // run build会走这个hook
    compiler.hooks.beforeRun.tapAsync(
      'MyPlugin',
      (compiler, callback) => {
        this.compile(callback)
      }
    );

    let isInitial = true
    // run dev会走这个hook
    compiler.hooks.watchRun.tapAsync('MyPlugin', (compiler, callback) => {
      if (!isInitial) return callback()
      isInitial = false

      var gaze = new Gaze('tailwind.config.js')
      gaze.on('all', () => this.compile())

      return this.compile(callback);
    })
  }

  compile(cb) {
    const start = +new Date()
    try {
      // ./src/styles/tailwind.css这个文件是对tailwind原子类引用的文件，
      // 比如文件内容可能如下：
      //       @tailwind base;
      //       @tailwind components;
      //       @tailwind utilities;
      //       。。。一些自定义样式。。。
      childProcess.execSync('.\\node_modules\\.bin\\tailwindcss-cli build ./src/styles/tailwind.css -c ./tailwind.config.js -o ./src/styles/_tailwind.css')
    } catch(e) {
      childProcess.execSync('./node_modules/.bin/tailwindcss-cli build ./src/styles/tailwind.css -c ./tailwind.config.js -o ./src/styles/_tailwind.css')
    }
    consola.success('编译tailwind成功 in ' + (+new Date() - start) / 1000 + 's')

    cb && cb()
  }
}

module.exports = MyPlugin

4. 然后在webpack中引入这个plugin
5. 去掉postcss配置中引用的tailwindcss插件
6. 去掉代码中对声明@tailwind components;、@tailwind utilities、@tailwind base的文件的引用,添加对src/styles/_tailwind.css的引用（此插件会生成这个文件）

分析

深层原因可能跟postcss有关，本人没去分析了，只是发现一个现象：直接使用命令行编译tailwind其实只需要几秒，而集成到postcss却会增加近1分钟甚至更久。
所以此插件做的事情是：在项目编译之前先用命令行编译tailwind并生成文件src/styles/_tailwind.css，由于上面第5步中引入了此文件，这样tailwind的样式就可以生效了

本人项目实测效果

run dev从1m20s到40s
bamboo上自动发布从6m到4m