Note-02-09-spring-webpack

Spring

• Remember to includes spring-boot-starter-web which contains web dependencies

• Maven dependency have scope, a dependency is only visiable in the correct scope, say only test file in test folder can access to denpendencies in test scope

Webpack --continue

Code splitting

Three approaches:

1. Entry Points: Manually split with entry

2. Prevent Duplication: use SplitChunksPlugin

3. Dynamic Imports: split code via inline func call

Entry points

Issues: By default, it is a static code splitting that treat bundles as independent self-contained code.

• If there are any duplicated modules between entry chunks they will be included in both bundles.

• It isn't as flexible and can't be used to dynamically split code with the core application logic.

Can solve be SplitChunksPlugin.

Prevent Duplication

// ...
optimization: {
  splitChunks: {
    chunks: 'all',
  },
}
// ...

Entrys will be chunked into bundles with shared vendors file. There are more plugins to split chunks: mini-css-extract-plugin, bundle-loader, etc

Tips: The chunks will be loaded by jsonp

Dynamic Imports

Old: require.ensure(); New: import(); Webpack use import() as promise out of box, it will be transformed to a internal promisefy module loading. For browser support, polyfill need to be added.

import() calls use promises internally. If you use import() with older browsers, remember to shim Promise using a polyfill such as es6-promise or promise-polyfill.

import() can be use with async and await with babel transpile.

Prefetch

import(/* webpackPrefetch: true */ 'LoginModal');

<link rel="prefetch" href="login-modal-chunk.js">

Parallel loading with parent chunk.

Preload:

import(/* webpackPreload: true */ 'ChartingLibrary');

<link rel="preload">

Loading while browser is idling.

webpack will add the prefetch hint once the parent chunk has been loaded.

How it works in browser:

Browser will load the resource in advance. When the module is referenced, webpack will append the script tag(as usual) and use jsonp to load the resource, browser will now serve the resource with preload/prefetched cache.