# 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.**