Skip to content

Commit 502f4a0

Browse files
authored
docs: add modern mode changes to the migration guide (#6438)
1 parent 8f055f8 commit 502f4a0

File tree

1 file changed

+13
-0
lines changed

1 file changed

+13
-0
lines changed

Diff for: docs/migrations/migrate-from-v4.md

+13
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,19 @@ Underlyingly, it uses the [`resolutions`](https://classic.yarnpkg.com/en/docs/se
7272

7373
Though both work in all our tests, please be aware that the `module-alias` approach is still considered hacky, and may not be as stable as the `"resolutions"` one.
7474

75+
#### Changes to the `build` command and modern mode
76+
77+
Starting with v5.0.0-beta.0, running `vue-cli-service build` will automatically generate different bundles based on your browserslist configurations.
78+
The `--modern` flag is no longer needed because it is turned on by default.
79+
80+
Say we are building a simple single-page app with the default setup, here are some possible scenarios:
81+
82+
* With the default browserslist target of Vue 2 projects (`> 1%, last 2 versions, not dead`), `vue-cli-service build` will produce two types of bundles:
83+
* One for modern target browsers that support `<script type="module">` (`app.[contenthash].js` and `chunk-vendors.[contenthash].js`). The bundle size will be much smaller because it drops polyfills and transformations for legacy browsers.
84+
* One for those do not (`app-legacy.[contenthash].js` and `chunk-vendors-legacy.[contenthash].js`), and will be loaded via `<script nomodule>`.
85+
* You can opt-out this behavior by appending a `--no-module` flag to the build command. `vue-cli-service build --no-module` will only output the legacy bundles that support all target browsers (loaded via plain `<script>`s).
86+
* With the default browserslist target of Vue 3 projects (`> 1%, last 2 versions, not dead, not ie 11`), all target browsers supports `<script type="module">`, there's no point (and no way) differentiating them, thus `vue-cli-service build` will only produce one type of bundle: `app.[contenthash].js` and `chunk-vendors.[contenthash].js` (loaded via plain `<script>`s).
87+
7588
#### CSS Modules
7689

7790
The `css.requireModuleExtension` option is removed. If you do need to strip the `.module` part in CSS Module file names, please refer to [Working with CSS > CSS Modules](../guide/css.md#css-modules) for more guidance.

0 commit comments

Comments
 (0)