Re: [pgAdmin][RM4701] Webpack optimization

Hi Ashesh,

On Wed, Sep 18, 2019 at 5:05 PM Ashesh Vashi <ashesh(dot)vashi(at)enterprisedb(dot)com>
wrote:

> On Wed, Sep 18, 2019 at 2:26 PM Aditya Toshniwal <
> aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:
>
>> Hi Hackers,
>>
>> Attached is the patch to optimise webpack bundled files for improving
>> performance.
>> @Ashesh Vashi <ashesh(dot)vashi(at)enterprisedb(dot)com> 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.
>
They are lazy loaded in the UI component, but are bundled along with
sqleditor JS. I'll separate them into a different JS file to further
isolate.

>
> -- Thanks, Ashesh
>
>>
>> Below is the size and files difference after and before the changes:
>> [image: Screenshot 2019-09-18 at 14.13.02.png][image: Screenshot
>> 2019-09-18 at 14.04.41.png]
>> Below is the lighthouse (Chrome extension) report after and before the
>> changes:
>> [image: Screenshot 2019-09-18 at 13.53.10.png] [image: 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"
>>
>

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