diff --git a/docs/guide/browser-compatibility.md b/docs/guide/browser-compatibility.md index fa39f70f7..18d3d281d 100644 --- a/docs/guide/browser-compatibility.md +++ b/docs/guide/browser-compatibility.md @@ -42,7 +42,25 @@ See [@babel-preset/env docs](https://new.babeljs.io/docs/en/next/babel-preset-en ## Modern Mode -> TODO +With Babel we are able to leverage all the newest language features in ES2015+, but that also means we have to ship transpiled and polyfilled bundles in order to support older browsers. These transpiled bundles often more verbose than the original native ES2015+ code, and also parses and runs slower. Given that today a good majority of the modern browsers have decent support for native ES2015, it is a waste that we have to ship heavier and less efficient code to those browsers just because we have to support older ones. + +Vue CLI offers a "Modern Mode" to help you solve this problem. When building for production with the following command: + +``` bash +vue-cli-service build --modern +``` + +Vue CLI will produce two versions of your app: one modern bundle targeting modern browsers that support [ES modules](https://jakearchibald.com/2017/es-modules-in-browsers/), and one legacy bundle targeting older browsers that do not. + +The cool part though is that there are no special deployment requirements. The generated HTML file automatically employs the techniques discussed in [Phillip Walton's excellent post](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/): + +- The modern bundle is loaded with `