Re: [pgAdmin][RM4701] Webpack optimization

Hi Hackers,

Attached is the updated patch to incorporate the reviews.
I'm finally able to lazy load chunks of JS ( leaflet, wkx, snapsvg, flotr2
- after a lot of hair pulling) as required to further reduce initial load
time.
gzip will be done only in case of server mode as suggested. Below is the
new structure of generated files (gzip will further reduce the size):
[image: Screenshot 2019-09-25 at 12.34.44.png]
Kindly review.

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

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

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