Re: [pgAdmin][RM4701] Webpack optimization

Hi,

I've also added a yarn command in package.json - "yarn run bundle:analyze"
which will generate an html report (webpack-bundle-analyzer) along with
bundling for production.

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

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

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