From 496a54e3f0b31ccee9f2396f449882825981e764 Mon Sep 17 00:00:00 2001 From: Jere Menichelli Date: Wed, 16 Aug 2017 16:27:04 -0300 Subject: [PATCH 1/6] Add polyfills on demand section to shimming page --- src/content/guides/shimming.md | 80 ++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) diff --git a/src/content/guides/shimming.md b/src/content/guides/shimming.md index 48a156c08deb..792157c869ef 100644 --- a/src/content/guides/shimming.md +++ b/src/content/guides/shimming.md @@ -5,6 +5,7 @@ contributors: - pksjce - jhnns - simon04 + - jeremenichelli --- `webpack` as a module bundler can understand modules written as ES2015 modules, CommonJS or AMD. But many times, while using third party libraries, we see that they expect dependencies which are global, AKA `$` for `jquery`. They might also be creating global variables which need to be exported. Here we will see different ways to help webpack understand these __broken modules__. @@ -158,3 +159,82 @@ module.exports = { ## Node Built-Ins Node built-ins, like `process`, can be polyfilled right directly from your configuration file without the use of any special loaders or plugins. See the [node configuration page](/configuration/node) for more information and examples. + + +## Loading polyfills on demand + +It's really common in web projects to include polyfills in the main bundle. This is not recommended since we are penalizing users using modern browsers, they will have to download a bigger file unnecessarely. + +The simplest way to mitigate this is to add a separate entry point in your webpack config file including the polyfills you need. + +```javascript +// webpack.config.js +module.exports = { + entry: { + polyfills: [ + 'babel-polyfill', + 'whatwg-fetch' + ], + main: './src/index.js' + } + // ... rest of your webpack config +}; +``` + +An alternative is to creative a new entry file and manually import the packages. + +```javascript +// src/polyfills.js +import 'babel-polyfill'; +import 'whatwg-fetch'; +``` + +```javascript +// webpack.config.js +module.exports = { + entry: { + polyfills: './src/polyfills.js', + main: './src/index.js' + } + // rest of your webpack config +}; +``` + +In your html file you need to conditionally load the `polyfills.js` before your bundle. How you make this decision depends on the technologies and browsers you need to support. + +```html + +``` + +Any script added dynamically like in the example above will run as soon as it's parsed, but we need our polyfill to run before our bundle. This is why we are setting `async` to `false` for each script. + + +### Smaller babel polyfill + +`babel-preset-env` uses [https://github.com/ai/browserslist](browserlist) to transpile only what is not supported in your browsers matrix. This preset comes with the `useBuiltIns` option _(false by default)_ which converts your global `babel-polyfill` import to a more granular feature by feature import like: + +```javascript +import "core-js/modules/es7.string.pad-start"; +import "core-js/modules/es7.string.pad-end"; +import "core-js/modules/web.timers"; +import "core-js/modules/web.immediate"; +import "core-js/modules/web.dom.iterable"; +``` From 66239285e60b5ca06aea62f64d33de4feda1b2b1 Mon Sep 17 00:00:00 2001 From: Jere Menichelli Date: Wed, 16 Aug 2017 16:31:06 -0300 Subject: [PATCH 2/6] Move async explanation as tip --- src/content/guides/shimming.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/guides/shimming.md b/src/content/guides/shimming.md index 792157c869ef..212600415040 100644 --- a/src/content/guides/shimming.md +++ b/src/content/guides/shimming.md @@ -224,7 +224,7 @@ In your html file you need to conditionally load the `polyfills.js` before your ``` -Any script added dynamically like in the example above will run as soon as it's parsed, but we need our polyfill to run before our bundle. This is why we are setting `async` to `false` for each script. +T> Any script added dynamically like in the example above will run as soon as it's parsed, but we need our polyfill to run before our bundle. This is why we are setting `async` to `false` for each script. ### Smaller babel polyfill From 56f7d28243a36fdf4e3ce4ba0fb8dd8ae8a0e2a9 Mon Sep 17 00:00:00 2001 From: Jere Menichelli Date: Wed, 16 Aug 2017 16:43:47 -0300 Subject: [PATCH 3/6] Link syntax fixed. References added --- src/content/guides/shimming.md | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/content/guides/shimming.md b/src/content/guides/shimming.md index 212600415040..ac2c56149566 100644 --- a/src/content/guides/shimming.md +++ b/src/content/guides/shimming.md @@ -163,9 +163,9 @@ Node built-ins, like `process`, can be polyfilled right directly from your confi ## Loading polyfills on demand -It's really common in web projects to include polyfills in the main bundle. This is not recommended since we are penalizing users using modern browsers, they will have to download a bigger file unnecessarely. +It's really common in web projects to include polyfills in the main bundle. This is not recommended since we are penalizing modern browsers users, since they will have to download a bigger file unnecessarely. -The simplest way to mitigate this is to add a separate entry point in your webpack config file including the polyfills you need. +The simplest way to mitigate this is by adding a separate entry point in your webpack config file including the polyfills your project needs. ```javascript // webpack.config.js @@ -181,7 +181,7 @@ module.exports = { }; ``` -An alternative is to creative a new entry file and manually import the packages. +An alternative is to create a new entry file and manually import these packages. ```javascript // src/polyfills.js @@ -200,7 +200,7 @@ module.exports = { }; ``` -In your html file you need to conditionally load the `polyfills.js` before your bundle. How you make this decision depends on the technologies and browsers you need to support. +In your html file you need to conditionally load the `polyfills.js` file before your bundle. How you make this decision depends on the technologies and browsers you need to support. ```html