|
| 1 | +# Tailwind CSS Performance |
| 2 | + |
| 3 | +Small repo to demonstrate the slow building of Tailwind CSS using `webpack-dev-server` HMR & PostCSS. |
| 4 | + |
| 5 | +## Errata |
| 6 | + |
| 7 | +Normally I would never check in a `.env` file into a GitHub repo, but in this case it makes the setup easier, and there are no actual secrets in it. |
| 8 | + |
| 9 | +## Setup |
| 10 | + |
| 11 | +To replicate the issue: |
| 12 | + |
| 13 | +1. Have Docker installed: https://docs.docker.com/get-docker/ |
| 14 | +2. Clone the repo via `git clone https://github.com/nystudio107/tailwind-css-performance.git` |
| 15 | +3. `cd` to the `tailwind-css-performance` directory, and type: `docker-compose up` (the first time building the Docker container will be slow) |
| 16 | +4. When you see `webpack_1 | ℹ ｢wdm｣: Compiled successfully.` in your terminal, the project is running |
| 17 | + |
| 18 | +## Testing |
| 19 | + |
| 20 | +Once the project is up and running, point your browser at: http://localhost:8080/ and show the developer tools JavaScript console. |
| 21 | + |
| 22 | +You should see a bright yellow background with confetti raining down, and the following in your JavaScript console: |
| 23 | + |
| 24 | +``` |
| 25 | +[HMR] Waiting for update signal from WDS... |
| 26 | +app.js:20766 You are running a development build of Vue. |
| 27 | +Make sure to use the production build (*.prod.js) when deploying for production. |
| 28 | +app.js:20966 [WDS] Hot Module Replacement enabled. |
| 29 | +app.js:20970 [WDS] Live Reloading enabled. |
| 30 | +``` |
| 31 | + |
| 32 | +### Reference: Speedy JavaScript HMR |
| 33 | + |
| 34 | +Next, make a simple change to `src/vue/Confetti.vue` such as changing `defaultSize: 20,` to `defaultSize: 40,` and you should see the it rebuild the JavaScript and HMR it quickly: |
| 35 | + |
| 36 | +``` |
| 37 | +client:55 [WDS] App updated. Recompiling... |
| 38 | +reloadApp.js:19 [WDS] App hot update... |
| 39 | +log.js:24 [HMR] Checking for updates on the server... |
| 40 | +log.js:24 [HMR] Updated modules: |
| 41 | +log.js:16 [HMR] - ../src/vue/Confetti.vue?vue&type=script&lang=ts |
| 42 | +log.js:24 [HMR] - ../src/vue/Confetti.vue?vue&type=script&lang=ts |
| 43 | +log.js:24 [HMR] - ../src/vue/Confetti.vue |
| 44 | +log.js:24 [HMR] App is up to date. |
| 45 | +``` |
| 46 | + |
| 47 | +### The issue: Slow PostCSS / Tailwind CSS rebuild |
| 48 | + |
| 49 | +Next to demonstrate the actual issue, make a simple change to `src/css/components/global.pcss` such as changing `background-color: yellow;` to `background-color: blue;` |
| 50 | + |
| 51 | +You should see it rebuild the CSS: |
| 52 | + |
| 53 | +``` |
| 54 | +[WDS] App updated. Recompiling... |
| 55 | +reloadApp.js:19 [WDS] App hot update... |
| 56 | +log.js:24 [HMR] Checking for updates on the server... |
| 57 | +log.js:24 [HMR] Updated modules: |
| 58 | +log.js:16 [HMR] - ../src/css/app.pcss |
| 59 | +log.js:24 [HMR] App is up to date. |
| 60 | +``` |
| 61 | + |
| 62 | +...but it will be quite slow in rebuilding, especially compared to the relatively fast JavaScript HMR. |
| 63 | + |
| 64 | +## Excpected Outcome |
| 65 | + |
| 66 | +As discussed in [Tailwind CSS issue #2544](https://github.com/tailwindlabs/tailwindcss/issues/2544), I'm hoping there can be some intelligent caching or preflighting for long-running processes such as `webpack-dev-server`. |
| 67 | + |
| 68 | +Have any instrumentation or profiling been hooked up to the build to determine where the bottlenecks are? |
0 commit comments