Re: [pgAdmin][RM4701] Webpack optimization

On Wed, Sep 18, 2019 at 5:25 PM Aditya Toshniwal <
aditya(dot)toshniwal(at)enterprisedb(dot)com> wrote:

> 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.
>
Code is written to loading it lazily, but - bundles are not made like that.
Hence - whenever you load the sqleditor bundle, it will load all
dependencies, which is not exactly expected in lazy loading.

-- Ashesh

>
>> -- 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"
>