Use esbuild to minify CSS #15756

lunny · 2021-05-06T22:03:45Z

silverwind commented

2021-05-06 22:03:45 +00:00

(Migrated from github.com)

It's about a 30% speedup in webpack build time with neglible differences in the output size. We do lose the ability for CSS source maps, but I never use them anyways.

Before:

assets by path css/*.css 1.08 MiB
  asset css/dropzone.css 9.36 KiB [emitted] [minimized] (name: dropzone) (id hint: vendors)
  asset css/easymde.css 11.8 KiB [emitted] [minimized] (name: easymde)
  asset css/index.css 846 KiB [emitted] [minimized] (name: index) 1 related asset
  asset css/minicolors.css 7.94 KiB [emitted] [minimized] (name: minicolors) (id hint: vendors)
  asset css/monaco.css 67.9 KiB [emitted] [minimized] (name: monaco) (id hint: vendors)
  asset css/swagger.css 140 KiB [emitted] [minimized] (name: swagger)
  asset css/theme-arc-green.css 17.6 KiB [emitted] [minimized] (name: theme-arc-green)

After:

assets by path css/*.css 1.08 MiB
  asset css/dropzone.css 9.48 KiB [emitted] [minimized] (name: dropzone) (id hint: vendors)
  asset css/easymde.css 12 KiB [emitted] [minimized] (name: easymde)
  asset css/index.css 854 KiB [emitted] [minimized] (name: index)
  asset css/minicolors.css 7.96 KiB [emitted] [minimized] (name: minicolors) (id hint: vendors)
  asset css/monaco.css 69.7 KiB [emitted] [minimized] (name: monaco) (id hint: vendors)
  asset css/swagger.css 139 KiB [emitted] [minimized] (name: swagger)
  asset css/theme-arc-green.css 17.9 KiB [emitted] [minimized] (name: theme-arc-green)

It's about a 30% speedup in webpack build time with neglible differences in the output size. We do lose the ability for CSS source maps, but I never use them anyways. Before: ``` assets by path css/*.css 1.08 MiB asset css/dropzone.css 9.36 KiB [emitted] [minimized] (name: dropzone) (id hint: vendors) asset css/easymde.css 11.8 KiB [emitted] [minimized] (name: easymde) asset css/index.css 846 KiB [emitted] [minimized] (name: index) 1 related asset asset css/minicolors.css 7.94 KiB [emitted] [minimized] (name: minicolors) (id hint: vendors) asset css/monaco.css 67.9 KiB [emitted] [minimized] (name: monaco) (id hint: vendors) asset css/swagger.css 140 KiB [emitted] [minimized] (name: swagger) asset css/theme-arc-green.css 17.6 KiB [emitted] [minimized] (name: theme-arc-green) ``` After: ``` assets by path css/*.css 1.08 MiB asset css/dropzone.css 9.48 KiB [emitted] [minimized] (name: dropzone) (id hint: vendors) asset css/easymde.css 12 KiB [emitted] [minimized] (name: easymde) asset css/index.css 854 KiB [emitted] [minimized] (name: index) asset css/minicolors.css 7.96 KiB [emitted] [minimized] (name: minicolors) (id hint: vendors) asset css/monaco.css 69.7 KiB [emitted] [minimized] (name: monaco) (id hint: vendors) asset css/swagger.css 139 KiB [emitted] [minimized] (name: swagger) asset css/theme-arc-green.css 17.9 KiB [emitted] [minimized] (name: theme-arc-green) ```