Vue CLI browser compatibility

browserslist

You'll find the browserslist field (or a separate .browserslistrc file) in the package.json file that specifies the scope of the project's target browser. This value is used @babel/preset-env and Autoprefixer to determine JavaScript features that need to be translated and CSS browser prefixes that need to be added.

Check out here to learn how to specify a browser range.

Polyfill

useBuiltIns: 'usage'

A default Vue CLI project uses @vue/babel-preset-app, which determines the polyfill required for the project through the @babel/preset-env and browserslist configurations.

By default, it passes useBuiltIns: 'usage' to @babel/preset-env so that it automatically detects the polyfill required based on the language characteristics that appear in the source code. T his ensures that the number of polyfills in the final package is minimized. However, this also means that Babel cannot detect one of these dependencies by default if it requires a special polyfill.

If you have a dependency that requires polyfill, you have several options:

1. If the dependency is written based on an ES version that is not supported by the target environment: Add it to the transpileDependencies option in the vue.config .js in the vue.config. This turns on syntax transformation and polyfill based on usage for the dependency at the same time.
2. If the dependency delivers ES5 code and explicitly lists the polyfill you need: You can pre-contain the polyfills required using the polyfills option of @vue/babel-preset-app. N ote es6.promise will be included by default, because library dependency on Promise is now very common. babel.config.js module.exports s. @vue .
3. If the dependency delivers ES5 code, but uses the ES6 plus feature and does not explicitly list the required polyfill (e.g. Vuetify): use use BuildIns: 'entry' and then add import 'core-js/stable' to the entry file; i mport 'regenerator-runtime/runtime';。 This imports all polyfills based on the browserslist target so that you don't have to worry about the polyfill problem you rely on, but because you include some unused polyfills, the final package size may increase.

More details can be found @babel-preset/env documentation.

Polyfills when building a library or Web Component

When using the Vue CLI to build a library or Web Component, it is recommended to pass in the useBuiltIns: false option to @vue/babel-preset-app. T his ensures that your library or component does not contain unnecessary polyfills. In general, packaging polyfills should be the responsibility of the app that ultimately uses your library.

Modern mode

With Babel we can juggle all the latest ES2015 plus language features, but it also means that we need to deliver the translated and polyfill package to support the old browser. T hese translated packages are typically longer and slower to run than native ES2015 plus code. Most modern browsers today already support native ES2015, so it's a waste to deliver bulky code to older browsers.

The Vue CLI provides a "modern mode" to help you solve this problem. Build the production environment with the following commands:

vue-cli-service build --modern

The Vue CLI produces versions of two applications: a modern version of the package for a modern browser that supports ES modules, and an older version of the package for an older browser that is not supported.

The coolest thing is that there are no special deployment requirements. The HTML files it generates automatically use the techniques discussed in Phillip Walton's wonderful blog post:

• Modern versions of packages are loaded in supported browsers through the "module" and preloaded using the "modulepreload" of the .lt;link rel.
• Older packages are loaded through the slt;script nomodule and are ignored by browsers that support ES modules.
• A fix for Safari 10, the script nomodule, is automatically injected.

For a Hello World app, the modern version of the package is 16% smaller. In a production environment, modern packages typically exhibit significant resolution and computational speeds to improve the loading performance of your application.

Tips

The "module" needs to be loaded with corS that is always on. T his means that your server must return a valid CORS header such as Access-Control-Allow-Origin: . If you want to get the script through authentication, you can set the crossorigin option to use-credentials.

At the same time, modern browsers use an inline script to prevent Safari 10 from repeatedly loading script packages, so if you're using a strict set of CSPs, you need to explicitly allow inline scripts in this way:

Content-Security-Policy: script-src 'self' 'sha256-4RS22DYeB7U14dra4KcQYxmwt5HkOInieXK1NUMB