Page MenuHomePhabricator

Bundle all CSS into one file
Closed, ResolvedPublic3 Estimated Story Points

Description

Currently, each entry point of the wmde19 skin generates its own CSS file. This will have adverse effects on performance because each HTML page has its own CSS file that needs to be loaded.

The webpack plugin [[ https://github.com/webpack-contrib/mini-css-extract-plugin | mini-css-extract ]] needs to be configured correctly to produce only one CSS file.

Notes:

  • Working example configurations can be found in https://github.com/webpack-contrib/mini-css-extract-plugin/issues/224
  • You can't copy-paste those configurations into the webpack configuration because vue-cli uses webpack-chain to build the configuration. You need to adapt vue.config.js
  • Please check if the resulting CSS file has duplicates in it. A CSS file that's growing and growing with each page is even worse than individual CSS files for each page.