Re: [pgAdmin4]: Webpacking of static JS/CSS

Hi

On Wed, Jul 12, 2017 at 4:04 PM, Surinder Kumar <
surinder(dot)kumar(at)enterprisedb(dot)com> wrote:

> Hi
>
> While this patch is in review, i have not attached patch for "unvendored
> libs" which is around 10MB in size and needs not to review.
> Attached is the patch which can be reviewed.
>
> *Changes:*
>
> 1) As React will be used in other modules, so the React components
> codebase is bundled into "vendor.js". the sqleditor.js bundle size is now
> just 239kb(excluding react)
>
> If a module needs React package as dependency, the user can write:
>
> `import React from 'react' or
>
> `require('react')`
>
> in respective module.
>
> 2) As Matt earlier pointed, application takes longer to start while
> generating bundle files. I used "hard-source-webpack-plugin
> <https://github.com/mzgoddard/hard-source-webpack-plugin/>" to reduce the
> build time and couple of other optimisations.
>
> - Initially webpack build time: 25.13 seconds
>
> - After removing 'pgadmin/browser' from ' resolve > modules, the time
> taken to build is reduced to 24.74 seconds
>
> ​- ​
> After downgrading css-loader(at)0(dot)28(dot)0 to css-loader(at)0(dot)14(dot)0
> ​, it took 22.44 seconds.
>
> ​The older version of css-loader doesn't have other packages like
> 'post-css', so it doesn't take much time to build.
>
> While "hard-source-webpack-plugin" manages the cache and stores it into
> 'generated/.cache/<env><hash>/' path.​ So when the build is run for the
> first time, it takes ~22 seconds.`
>
> When run for second time, it takes 2-3 seconds to build. it builds only
> the chunks which have changes.
>
> When build in production mode, initially it took ~47 seconds.
>
> On second run, it took ~22 seconds. the only change between development
> and production builds are "CommonChunks" and "UglifyJS" plugins which are
> used for production build. So, "hard-source-webpack-plugin" doesn't seems
> to support build with these two optimisation plugins.
>
> Please review updated patch.
>

Works beautifully in the browser and in the runtime; the speedup is
significant. Excellent work!

However, the regression tests fail miserably :-(

ERROR in ./node_modules/slickgrid/slick.core.js
Module not found: Error: Can't resolve 'jquery.ui' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.core.js 3:12-32 11:12-32
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/slick.core.js
Module not found: Error: Can't resolve 'jquery.event.drag' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.core.js 6:20-48 14:20-48
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/slick.core.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.core.js 1:0-17
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/slick.grid.js
Module not found: Error: Can't resolve 'jquery.ui' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.grid.js 3:12-32
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/slick.grid.js
Module not found: Error: Can't resolve 'jquery.event.drag' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.grid.js 6:20-48
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/slick.grid.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.grid.js 1:0-17
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/slick.dataview.js
Module not found: Error: Can't resolve 'jquery.ui' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.dataview.js 3:12-32
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/slick.dataview.js
Module not found: Error: Can't resolve 'jquery.event.drag' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.dataview.js 6:20-48
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/slick.dataview.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.dataview.js 1:0-17
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/slick.editors.js
Module not found: Error: Can't resolve 'jquery.ui' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.editors.js 3:12-32
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/slick.editors.js
Module not found: Error: Can't resolve 'jquery.event.drag' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.editors.js 6:20-48
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/slick.editors.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.editors.js 1:0-17
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/slick.formatters.js
Module not found: Error: Can't resolve 'jquery.ui' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.formatters.js 3:12-32
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/slick.formatters.js
Module not found: Error: Can't resolve 'jquery.event.drag' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.formatters.js 6:20-48
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/slick.formatters.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid'
@ ./node_modules/slickgrid/slick.formatters.js 1:0-17
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid/lib'
@ ./node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js 1:0-17
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/plugins/slick.autotooltips.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid/plugins'
@ ./node_modules/slickgrid/plugins/slick.autotooltips.js 1:0-17
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/plugins/slick.cellrangedecorator.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid/plugins'
@ ./node_modules/slickgrid/plugins/slick.cellrangedecorator.js 1:0-17
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./node_modules/slickgrid/plugins/slick.cellrangeselector.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/node_modules/slickgrid/plugins'
@ ./node_modules/slickgrid/plugins/slick.cellrangeselector.js 1:0-17
@ ./pgadmin/static/bundle/slickgrid.js

ERROR in ./regression/javascript/code_mirror_spec.jsx
Module not found: Error: Can't resolve
'../../pgadmin/static/vendor/jquery/jquery-1.11.2' in
'/Users/dpage/git/pgadmin4/web/regression/javascript'
@ ./regression/javascript/code_mirror_spec.jsx 7:14-73

ERROR in ./regression/javascript/selection/grid_selector_spec.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/regression/javascript/selection'
@ ./regression/javascript/selection/grid_selector_spec.js 3:14-31

ERROR in ./regression/javascript/selection/copy_data_spec.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/regression/javascript/selection'
@ ./regression/javascript/selection/copy_data_spec.js 3:14-31

ERROR in ./regression/javascript/selection/column_selector_spec.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/regression/javascript/selection'
@ ./regression/javascript/selection/column_selector_spec.js 3:14-31

ERROR in ./regression/javascript/selection/range_selection_helper_spec.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/regression/javascript/selection'
@ ./regression/javascript/selection/range_selection_helper_spec.js 3:14-31

ERROR in ./regression/javascript/selection/row_selector_spec.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/regression/javascript/selection'
@ ./regression/javascript/selection/row_selector_spec.js 3:14-31

ERROR in ./regression/javascript/selection/set_staged_rows_spec.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/regression/javascript/selection'
@ ./regression/javascript/selection/set_staged_rows_spec.js 3:14-31

ERROR in ./regression/javascript/selection/xcell_selection_model_spec.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/regression/javascript/selection'
@ ./regression/javascript/selection/xcell_selection_model_spec.js 15:14-31

ERROR in ./regression/javascript/slickgrid/cell_selector_spec.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/regression/javascript/slickgrid'
@ ./regression/javascript/slickgrid/cell_selector_spec.js 3:14-31

ERROR in
./regression/javascript/slickgrid/event_handlers/handle_query_output_keyboard_event_spec.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/regression/javascript/slickgrid/event_handlers'
@
./regression/javascript/slickgrid/event_handlers/handle_query_output_keyboard_event_spec.js
25:14-31

ERROR in ./regression/javascript/alerts/alertify_wrapper_spec.js
Module not found: Error: Can't resolve
'../../../pgadmin/static/vendor/alertifyjs/alertify' in
'/Users/dpage/git/pgadmin4/web/regression/javascript/alerts'
@ ./regression/javascript/alerts/alertify_wrapper_spec.js 3:16-77

ERROR in ./pgadmin/static/js/check_node_visibility.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/js'
@ ./pgadmin/static/js/check_node_visibility.js 12:0-42:2
@ ./regression/javascript/check_node_visibility_spec.js

ERROR in ./pgadmin/static/js/sqleditor_utils.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/js'
@ ./pgadmin/static/js/sqleditor_utils.js 13:0-59:2
@ ./regression/javascript/sqleditor_utils_spec.js

ERROR in ./pgadmin/static/js/alerts/alertify_wrapper.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/js/alerts'
@ ./pgadmin/static/js/alerts/alertify_wrapper.js 3:0-39:2
@ ./regression/javascript/alerts/alertify_wrapper_spec.js

ERROR in ./pgadmin/static/js/alerts/alertify_wrapper.js
Module not found: Error: Can't resolve 'alertify' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/js/alerts'
@ ./pgadmin/static/js/alerts/alertify_wrapper.js 3:0-39:2
@ ./regression/javascript/alerts/alertify_wrapper_spec.js

ERROR in ./pgadmin/static/js/selection/active_cell_capture.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/js/selection'
@ ./pgadmin/static/js/selection/active_cell_capture.js 3:0-185:2
@ ./regression/javascript/selection/active_cell_capture_spec.js

ERROR in ./pgadmin/static/js/selection/grid_selector.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/js/selection'
@ ./pgadmin/static/js/selection/grid_selector.js 3:0-76:2
@ ./regression/javascript/selection/column_selector_spec.js

ERROR in ./pgadmin/static/js/selection/xcell_selection_model.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/js/selection'
@ ./pgadmin/static/js/selection/xcell_selection_model.js 3:0-228:2
@ ./regression/javascript/selection/grid_selector_spec.js

ERROR in ./pgadmin/static/js/selection/clipboard.js
Module not found: Error: Can't resolve 'alertify' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/js/selection'
@ ./pgadmin/static/js/selection/clipboard.js 3:0-77:2
@ ./regression/javascript/selection/copy_data_spec.js

ERROR in ./pgadmin/static/js/selection/copy_data.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/js/selection'
@ ./pgadmin/static/js/selection/copy_data.js 3:0-34:2
@ ./regression/javascript/selection/copy_data_spec.js

ERROR in ./pgadmin/static/js/selection/column_selector.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/js/selection'
@ ./pgadmin/static/js/selection/column_selector.js 3:0-117:2
@ ./regression/javascript/selection/column_selector_spec.js

ERROR in ./pgadmin/static/js/selection/row_selector.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/js/selection'
@ ./pgadmin/static/js/selection/row_selector.js 3:0-92:2
@ ./regression/javascript/selection/row_selector_spec.js

ERROR in ./pgadmin/static/js/selection/set_staged_rows.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/js/selection'
@ ./pgadmin/static/js/selection/set_staged_rows.js 12:0-99:2
@ ./regression/javascript/selection/set_staged_rows_spec.js

ERROR in ./pgadmin/static/jsx/history/detail/code_mirror.jsx
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/jsx/history/detail'
@ ./pgadmin/static/jsx/history/detail/code_mirror.jsx 13:14-31
@ ./regression/javascript/code_mirror_spec.jsx

ERROR in ./pgadmin/browser/static/js/menu.js
Module not found: Error: Can't resolve 'jquery' in
'/Users/dpage/git/pgadmin4/web/pgadmin/browser/static/js'
@ ./pgadmin/browser/static/js/menu.js 5:0-424:2
@ ./regression/javascript/browser/menu_spec.js

ERROR in ./pgadmin/static/js/check_node_visibility.js
Module not found: Error: Can't resolve 'underscore.string' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/js'
@ ./pgadmin/static/js/check_node_visibility.js 12:0-42:2
@ ./regression/javascript/check_node_visibility_spec.js

ERROR in ./pgadmin/browser/static/js/menu.js
Module not found: Error: Can't resolve 'underscore.string' in
'/Users/dpage/git/pgadmin4/web/pgadmin/browser/static/js'
@ ./pgadmin/browser/static/js/menu.js 5:0-424:2
@ ./regression/javascript/browser/menu_spec.js

ERROR in ./pgadmin/static/bundle/codemirror.js
Module not found: Error: Can't resolve 'pgadmin.sqlfoldcode' in
'/Users/dpage/git/pgadmin4/web/pgadmin/static/bundle'
@ ./pgadmin/static/bundle/codemirror.js 39:0-30
@ ./pgadmin/static/jsx/history/detail/code_mirror.jsx
@ ./regression/javascript/code_mirror_spec.jsx
webpack: Failed to compile.
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module
"../../pgadmin/static/vendor/jquery/jquery-1.11.2"
at regression/javascript/code_mirror_spec.jsx:83268

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module
"../../pgadmin/static/vendor/jquery/jquery-1.11.2"
at regression/javascript/code_mirror_spec.jsx:83268

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/history/query_history_spec.jsx:50644

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/history/query_history_spec.jsx:50644

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module
"../../../pgadmin/static/vendor/alertifyjs/alertify"
at regression/javascript/alerts/alertify_wrapper_spec.js:74

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module
"../../../pgadmin/static/vendor/alertifyjs/alertify"
at regression/javascript/alerts/alertify_wrapper_spec.js:74

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "underscore.string"
at regression/javascript/browser/menu_spec.js:1852

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "underscore.string"
at regression/javascript/browser/menu_spec.js:1852

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/check_node_visibility_spec.js:1678

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/check_node_visibility_spec.js:1678

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/active_cell_capture_spec.js:2318

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/active_cell_capture_spec.js:2318

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/column_selector_spec.js:7027

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/column_selector_spec.js:7027

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/copy_data_spec.js:6711

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/copy_data_spec.js:6711

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/grid_selector_spec.js:6834

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/grid_selector_spec.js:6834

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/range_boundary_navigator_spec.js:584

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/range_boundary_navigator_spec.js:584

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/range_selection_helper_spec.js:6198

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/range_selection_helper_spec.js:6198

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/row_selector_spec.js:6727

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/row_selector_spec.js:6727

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/set_staged_rows_spec.js:6198

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/set_staged_rows_spec.js:6198

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/xcell_selection_model_spec.js:7089

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/selection/xcell_selection_model_spec.js:7089

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/slickgrid/cell_selector_spec.js:6434

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/slickgrid/cell_selector_spec.js:6434

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at
regression/javascript/slickgrid/event_handlers/handle_query_output_keyboard_event_spec.js:6411

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at
regression/javascript/slickgrid/event_handlers/handle_query_output_keyboard_event_spec.js:6411

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/sqleditor_utils_spec.js:125

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at regression/javascript/sqleditor_utils_spec.js:125

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at pgadmin/static/bundle/slickgrid.js:1008

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
Error: Cannot find module "jquery"
at pgadmin/static/bundle/slickgrid.js:1008

--
Dave Page
Blog: http://pgsnake.blogspot.com
Twitter: @pgsnake

EnterpriseDB UK: http://www.enterprisedb.com
The Enterprise PostgreSQL Company