Hi On Mon, Jun 5, 2017 at 10:22 AM, Surinder Kumar <surinder.ku...@enterprisedb.com> wrote: > 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.
I think this is a good, simple method. It handles debug v.s release, and of course, any plugin modules can include their own images/CSS without even having to worry about webpacking if installed later. > For now it minifies only vendor CSS files, I will add modules static files > in the list later on. I think we need to do that to get a better idea of the benefits. We also need to get some of the JS code in there as well (Ashesh should be able to help with that - he told me he's de-templatised a lot of that now). > Any thoughts on minifying template CSS files which are built dynamically and > loaded with dependency on other modules? Let's look at why they are templates. Is that required, or could they be made static? > 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. Given how straightforward this seems to be, I'm not sure it's needed. Joao, any comments? Nice work - thanks! -- Dave Page Blog: http://pgsnake.blogspot.com Twitter: @pgsnake EnterpriseDB UK: http://www.enterprisedb.com The Enterprise PostgreSQL Company -- Sent via pgadmin-hackers mailing list (pgadmin-hackers@postgresql.org) To make changes to your subscription: http://www.postgresql.org/mailpref/pgadmin-hackers
