Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(tools): Optimize build by switching css processing to esbuild #8008

Merged
merged 18 commits into from
Dec 19, 2023

Conversation

pskelin
Copy link
Contributor

@pskelin pskelin commented Dec 15, 2023

yarn start on mac improvement from 15s -> 8s

Important: note this esbuild change in @import behaviour:
https://esbuild.github.io/content-types/#css-import-order

CSS processing (resolving imports and minification) is switched from postcss to esbuild for much better performance.

  • the custom postcss plugins for generating JS/TS and JSON files are switched to esbuild plugins and run on the string content only
  • removal of duplicate selectors is improved by running in onExit and this is the only remaining postcss plugin running on string only, no file operations
  • all other postcss plugins and build steps are removed

Other improvements

  • all JSON files are generated in dist and this saves a copy step
  • starting the watch mode for templates, CSS files and i18n processes all files again and if the content is the same, they are not changed. So the normal start is:
    • process all non-code files and generate a TS/JSON file
    • start vite in dev mode (this already works but doesn't refresh on changes)
    • start all watch tasks parallel to the vite start
  • the watch tasks now compete with the vite page load and make it a bit slower, so this change delays the watch by 5 seconds so that vite can start faster

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants