[Webpack] Smart loading assets
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` .
Using a `webpack` plugin to alter `html` code in build/compile process.
and the author did it:
Contribute to html-webpack-condition-assets development by creating an account on GitHub.github.com
## 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.