Re: [pgAdmin][RM4701] Webpack optimization

remove me from this list

On September 26, 2019 at 3:46 AM, Aditya Toshniwal<aditya(dot)toshniwal(at)enterprisedb(dot)com>wrote:
> Hi Khushboo,
> On Thu, Sep 26, 2019 at 3:57 PM Khushboo Vashi<khushboo(dot)vashi(at)enterprisedb(dot)com(mailto: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(mailto: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(mailto: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):
> > > >
> > > > Kindly review.
> > > > On Wed, Sep 18, 2019 at 5:28 PM Ashesh Vashi<ashesh(dot)vashi(at)enterprisedb(dot)com(mailto: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(mailto: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(mailto: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(mailto:aditya(dot)toshniwal(at)enterprisedb(dot)com)>wrote:
> > > > > > > > Hi Hackers,
> > > > > > > >
> > > > > > > > Attached is the patch to optimise webpack bundled files for improving performance.
> > > > > > > > @Ashesh Vashi(mailto: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:
> > > > > > > >
> > > > > > > > Below is the lighthouse (Chrome extension) report after and before the changes:
> > > > > > > >
> > > > > > > >
> > > > > > > > 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"
>
>
>
>
>
>
>
>
>
>