search

martonlederer / esbuild-plugin-postcss2

Use postcss with esbuild
MIT License
33 stars 19 forks source link

Support cache #29

Open baurine opened 2 years ago

baurine commented 2 years ago

What did

Background

I use this plugin to compile the less and less module CSS files with esbuild for my a little large project. It works fine in the production mode, but in the dev mode, when we modify a CSS file, it cost more than 4s to make a rebuild, even we enable the incremental: true option. It doesn't satisfy us.

After investigating, we found the pure js code only cost hundreds of milliseconds to rebuild, most of the rebuild time is cost by compiling CSS.

According to the official advice, we can add the cache strategy for the plugin. So I try it, and it works amazing, the rebuild time is reduced from more than 4s to 600~700ms.

Result

In dev mode, enable incremental rebuild.

When enableCache: false, after changing a line of CSS code:

Build started
Build ended: 4660ms
Mapping /dashboard to "http://127.0.0.1:8888"
Serving "build" at http://127.0.0.1:8888
Ready for changes

Build started
...
CSS change detected build/diagnoseReport.css
CSS change detected build/dashboardApp.css
Change detected build/diagnoseReport.css.map
CSS change detected build/UserProfile-VBHKZLS6.css
Change detected build/UserProfile-VBHKZLS6.css.map
Change detected build/chunk-7CNVMG4T.js.map
Build ended: 4018ms

When enableCache: true, after changing a line of CSS code:

Build started
Build ended: 4564ms
Mapping /dashboard to "http://127.0.0.1:8888"
Serving "build" at http://127.0.0.1:8888
Ready for changes

Build started
...
Change detected build/chunk-ADLMHXCA.js
Change detected build/chunk-ADLMHXCA.js.map
Change detected build/chunk-DKAPZFJ6.js
Change detected build/chunk-DKAPZFJ6.js.map
Build ended: 699ms
baurine commented 2 years ago

If this PR is merged before PR #30 , then PR#30 can be closed because this PR includes the PR#30 changes to resolve the PR conflicts.