Re: [pgAdmin][RM4701] Webpack optimization

Hi Khushboo,

On Thu, Sep 26, 2019 at 3:57 PM Khushboo Vashi <
khushboo(dot)vashi(at)enterprisedb(dot)com> wrote:

> 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 had added that I remember :/
Bad miss :(

> - 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))
>
Yeah, I will check what I can do on this.

> - I couldn't find the way to test the Flask - Compress scenario, please
> let me know how to check
>
OK, so as per suggestions, Flask Compress is disabled in Desktop Mode. In
the server mode, you can check the headers in network.

> - *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.
>
The problem with lighthouse is, it only checks the initial loading of the
app. We have improved lazy loading in SQL editor, which is not even tested
by lighthouse \_(- -)_/

Thank you, will send the updated patch.

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

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