[Webpack] Smart loading assets

Source:

Rephrased content:

## Problem

Old browsers doesn’t support some JS “advance” features like: fetch, Promise,… We usually resolve this problem by using `polyfill` . But loading `polyfill` causes a bit slow down for modern browsers which support these advance features already.

Then, solution for avoid loading `polyfill` in modern browsers is checking whether features are supported or not. If no, we ask browsers to load `polyfill` first, else just go forward.

But there is still another problem.

For example, we have `vendor.js` and `app.js` which use `fetch` and `Promise` features. Then the `html` code should be:

It’s good, but, if you’re using `Webpack` to build your system, it’s not easy.

So, the problem here is: How to build/generate a code like above via `webpack` .

## Solution

Using a `webpack` plugin to alter `html` code in build/compile process.

and the author did it:

## Lesson learnt

- `preload` is new feature of html, to tell browsers that this resource should be loaded soon, because we will need to use it pretty soon.

- `unshift` method will push new element at the beginning of an array. It likes `push` but for the opposite side of array. `push` works with the end, `unshift` works with the beginning. The concept is similar for `shift` and `pop`

- We can alter `html` via `webpack` ! Heil Webpack!

- `polyfill` is the library which provides JS advance features to old browsers.

Show your support

Clapping shows how much you appreciated Michael Vu’s story.