kristw opened a new pull request #5813: Enable CSS Hot Module Replacement and 
optimize css output for production
URL: https://github.com/apache/incubator-superset/pull/5813
 
 
   ## Enable HMR for CSS
   
   Current webpack settings uses `mini-css-extract-plugin` for both development 
and production. This plugin extract css into many small files based on the 
modules that imports them. 
   
   However, per the package's README, it is recommended for production only 
especially if we want Hot Module Replacement (HMR) for CSS. To use HMR, we need 
to use `style-loader` when in development mode. Otherwise, the page will not 
update after saving CSS files.
   
   
https://github.com/webpack-contrib/mini-css-extract-plugin#advanced-configuration-example
   
   To ensure that `style-loader` works correctly, I also need to modify the 
html templates to import `theme` js entry points. Because `style-loader` 
injects css code via js that writes `<style>` tags instead of exporting css 
files. 
   
   ## Optimize CSS output
   
   Current CSS output from webpack are not minified. This PR adds 
`optimize-css-assets-webpack-plugin` to minify CSS outputs. The minified 
results reduce CSS size by ~100kb
   
   
![pasted_image_9_4_18__11_33_am](https://user-images.githubusercontent.com/1659771/45051003-9daf4780-b037-11e8-9434-2b7816503979.png)
   
   ## Testing
   
   I have tested building in production and running dev server. Both are 
working fine. 
   
   @graceguo-supercat @xtinec @hughhhh 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
[email protected]


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to