Hi Dave,
Please find attached patch for minifying CSS files and optimize images using Webpack.
Steps to run:
1) After applying patch, go to web directory and run npm install on terminal to install packages which are used to parse/minify CSS files.
2) Run npm run build which creates dist folder inside web/pgadmin/static/ directory to store processed images, fonts and css files.
3. Set DEBUG = False in config_local.py and then run python pgAdmin.py to start server.
I kept generated main.css and overrides.css conditional in base.html to load them only when debug mode is False
After running "npm run build", following files/directories are generated:
1) main.css - about 20 vendor CSS files are packed into this file and more importantly the paths to images are preserved.
2) overrides.css - it contains bootstrap.overrides.css and pgadmin.css, they has to be packed separately and loaded after all CSS files are loaded because the purpose of these files is to override the vendor or modules css.
3) img - it contains the images used in CSS files. The name of image files can also be hashed names for caching purpose which we can use.
4) fonts - it contains the fonts used in fontawesome.css and other css files.
This is a simple patch to demonstrate how CSS files will be minified with Webpack.
For now it minifies only vendor CSS files, I will add modules static files in the list later on.
Any thoughts on minifying template CSS files which are built dynamically and loaded with dependency on other modules?
Also, I looked into Flask-webpack which generates bundled assets using Webpack(webpack.config.js) and provide additionally global template tags to use in Jinja templates.
But it might not work with latest version of Webpack as this repo is not updated since last 2 years. I need to check with latest version and I will update on this.
Thanks
Surinder