Re: [pgAdmin][RM4701] Webpack optimization - Mailing list pgadmin-hackers

From Ashesh Vashi
Subject Re: [pgAdmin][RM4701] Webpack optimization
Date
Msg-id CAG7mmozSocEmxMOLKTnKcpvP_+AewXeKUoyn-YQMff+nF1Bv=A@mail.gmail.com
Whole thread Raw
In response to [pgAdmin][RM4701] Webpack optimization  (Aditya Toshniwal <aditya.toshniwal@enterprisedb.com>)
Responses Re: [pgAdmin][RM4701] Webpack optimization  (Aditya Toshniwal <aditya.toshniwal@enterprisedb.com>)
List pgadmin-hackers
On Wed, Sep 18, 2019 at 2:26 PM Aditya Toshniwal <aditya.toshniwal@enterprisedb.com> wrote:
Hi Hackers,

Attached is the patch to optimise webpack bundled files for improving performance. 
@Ashesh Vashi Thank you for your suggestions and inputs.

Changes include:
1) Remove underscore-string and sprintf-js packages as we were using only %s. Instead, added a function to do the same. Also changed gettext to behave like sprintf directly.
2) backgrid.sizeable.columns was not used anywhere, removed. @babel/polyfill is deprecated, replaced it with core-js.
3) Moved few css to make sure they get minified and bundled.
4) Added Flask-Compress to send static files as compressed gzip. This will reduce network traffic and improve initial load time for pgAdmin.
5) Split few JS files to make code reusable.
6) Lazy load few modules like leaflet, wkx is required only if geometry viewer is opened. snapsvg loaded only when explain plan is executed. This will improve sqleditor initial opening time.
Move svgsnap, and its dependencies completely in separate module, and load them only when required (lazy loading).
Similarly - leaflet should be in a separate module, as not many user will use the Geometry Viewer.

-- Thanks, Ashesh

Below is the size and files difference after and before the changes:
Screenshot 2019-09-18 at 14.13.02.pngScreenshot 2019-09-18 at 14.04.41.png
Below is the lighthouse (Chrome extension) report after and before the changes:
Screenshot 2019-09-18 at 13.53.10.png      Screenshot 2019-09-18 at 14.08.20.png

Do not forget to do a yarn install and a pip install
Kindly review.

--
Thanks and Regards,
Aditya Toshniwal
Software Engineer | EnterpriseDB India | Pune
"Don't Complain about Heat, Plant a TREE"
Attachment

pgadmin-hackers by date:

Previous
From: Dave Page
Date:
Subject: Re: [pgAdmin][RM4701] Webpack optimization
Next
From: Aditya Toshniwal
Date:
Subject: Re: [pgAdmin][RM4701] Webpack optimization