Re: [pgAdmin][RM4701] Webpack optimization

Hi Aditya,

I have reviewed the patch and it works fine, however some of the review
comments as below:

- Flask compress dependency is not included in the requirement.txt file in
this patch, so giving error.
- I have found 2 forms of sprintf in the code as below, can we make them
identical?
sprintf(gettext('Restore (%s: %s)'), node.label, data.label)
pgadminUtils.sprintf('%s/%s', ref, encodeURI(o._id))
- I couldn't find the way to test the Flask - Compress scenario, please let
me know how to check.
- *Webpack changes including lazy loading looks good to me*, however I
couldn't find any performance improvement in lighthouse, may be because
there are many parameters which are in consideration as per their report.

Thanks,
Khushboo

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

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