Optimize JS bundle size when doing production builds

[yuvipanda]

When we ship the JS built by webpack, we should ship a 'production' version that's optimized for size, etc. Otherwise the bundle sizes seem pretty big:

➜ npm run webpack

> [email protected] webpack
> webpack

asset bundle.js 415 KiB [compared for emit] [minimized] [big] (name: main) 2 related assets
runtime modules 663 bytes 3 modules
orphan modules 1.04 KiB [orphan] 1 module
modules by path ../../node_modules/ 608 KiB
  modules by path ../../node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
  modules by path ../../node_modules/xterm/ 315 KiB
    ../../node_modules/xterm/lib/xterm.js 306 KiB [built] [code generated]
    ../../node_modules/css-loader/dist/cjs.js!../../node_modules/xterm/css/xterm.css 9.81 KiB [built] [code generated]
  modules by path ../../node_modules/css-loader/dist/runtime/*.js 3.85 KiB
    ../../node_modules/css-loader/dist/runtime/cssWithMappingToString.js 2.28 KiB [built] [code generated]
    ../../node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
  ../../node_modules/xterm-addon-fit/lib/xterm-addon-fit.js 1.68 KiB [built] [code generated]
  ../../node_modules/jquery/dist/jquery.js 282 KiB [built] [code generated]
./js/index.js + 1 modules 10 KiB [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  bundle.js (415 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (415 KiB)
      bundle.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

Originally posted by @yuvipanda in https://github.com/jupyterhub/nbgitpuller/issues/197#issuecomment-902820238

[consideRatio]

Technical overview

• setup.py is making sure a npm dependencies are installed, but the only dependencies we have are devDependencies rather than things shipping with the build.
  • package.json defines devDependencies and the scripts that can be invoked via npm run <script name>
  • setup.py invokes npm install and npm run webpack before the setup function is called

Ideas about this

• I think there webpack can be invoked with various flags, and perhaps the only actual point for us is to add such flag?
• There is npm ci to install the packages as listed in a frozen package-lock.json file etc, but its not relevant for us at least without any actual dependencies I think.

[yuvipanda]

Yeah, I think the goal is to make sure some minification happens, so we don't load close to half a megabyte of JS on page load. We should also make sure our pypi package doesn't contain the .map file either.

[consideRatio]

Googing around, this seem relevant:

https://webpack.js.org/guides/production/ https://webpack.js.org/configuration/optimization/#optimizationminimize