|
1 |
| -## [TODO] Build Targets |
| 1 | +## Build Targets |
2 | 2 |
|
3 | 3 | ### App
|
4 | 4 |
|
| 5 | +App mode is the default mode. In this mode: |
| 6 | + |
| 7 | +- `index.html` with asset and resource hints injection |
| 8 | +- vendor libraries split into a separate chunk for better caching |
| 9 | +- static assets under 10kb are inlined into JavaScript |
| 10 | +- static assets in `public` are copied into output directory |
| 11 | + |
5 | 12 | ### Library
|
6 | 13 |
|
| 14 | +You can build a single entry as a library using |
| 15 | + |
| 16 | +``` |
| 17 | +vue-cli-service build --target lib --name myLib [entry] |
| 18 | +``` |
| 19 | + |
| 20 | +The entry can be either a `.js` or a `.vue` file. If no entry is specified, `src/App.vue` will be used. |
| 21 | + |
| 22 | +A lib build outputs: |
| 23 | + |
| 24 | +- `dist/myLib.common.js` |
| 25 | + |
| 26 | + A CommonJS bundle for consuming via bundlers (unfortunately, webpack currently does not support ES modules output format for bundles yet) |
| 27 | + |
| 28 | +- `dist/myLib.umd.js` |
| 29 | + |
| 30 | + A UMD bundle for consuming directly in browsers or with AMD loaders |
| 31 | + |
| 32 | +- `dist/myLib.umd.min.js` |
| 33 | + |
| 34 | + Minified version of the UMD build. |
| 35 | + |
| 36 | +- `dist/myLib.css` |
| 37 | + |
| 38 | + Extracted CSS file (can be forced into inlined by setting `css: { extract: false }` in `vue.config.js`) |
| 39 | + |
7 | 40 | ### Web Component
|
| 41 | + |
| 42 | +> [Compatibility](https://github.com/vuejs/vue-web-component-wrapper#compatibility) |
| 43 | +
|
| 44 | +You can build a single entry as a library using |
| 45 | + |
| 46 | +``` |
| 47 | +vue-cli-service build --target wc --name my-element [entry] |
| 48 | +``` |
| 49 | + |
| 50 | +This will produce a single JavaScript file (and its minified version) with everything inlined. The script, when included on a page, registers the `<my-element>` custom element, which wraps the target Vue component using `@vue/web-component-wrapper`. The wrapper automatically proxies properties, attributes, events and slots. See the [docs for `@vue/web-component-wrapper`](https://github.com/vuejs/vue-web-component-wrapper) for more details. |
| 51 | + |
| 52 | +Note the bundle relies on `Vue` being globally available on the page. |
| 53 | + |
| 54 | +This mode allows consumers of your component to use the Vue component as a normal DOM element: |
| 55 | + |
| 56 | +``` html |
| 57 | +<script src="https://unpkg.com/vue"></script> |
| 58 | +<script src="path/to/my-element.js"></script> |
| 59 | + |
| 60 | +<!-- use in plain HTML, or in any other framework --> |
| 61 | +<my-element></my-element> |
| 62 | +``` |
| 63 | + |
| 64 | +#### Bundle that Registers Multiple Web Components |
| 65 | + |
| 66 | +When building a web component bundle, you can also target multiple components by using a glob as entry: |
| 67 | + |
| 68 | +``` |
| 69 | +vue-cli-service build --target wc --name foo 'src/components/*.vue' |
| 70 | +``` |
| 71 | + |
| 72 | +When building multiple web components, `--name` will be used as the prefix and the custom element name will be inferred from the component filename. For example, with `--name foo` and a component named `HelloWorld.vue`, the resulting custom element will be registered as `<foo-hello-world>`. |
| 73 | + |
| 74 | +### Async Web Component |
| 75 | + |
| 76 | +> [Compatibility](https://github.com/vuejs/vue-web-component-wrapper#compatibility) |
| 77 | +
|
| 78 | +When targeting multiple web components, the bundle may become quite large, and the user may only use a few of the components your bundle registers. The async web component mode produces a code-split bundle with a small entry file that provides the shared runtime between all the components, and registers all the custom elements upfront. The actual implementation of a component is then fetched on-demand only when an instance of the corresponding custom element is used on the page: |
| 79 | + |
| 80 | +``` |
| 81 | +vue-cli-service build --target wc-async --name foo 'src/components/*.vue' |
| 82 | +``` |
| 83 | + |
| 84 | +``` |
| 85 | +File Size Gzipped |
| 86 | +
|
| 87 | +dist/foo.0.min.js 12.80 kb 8.09 kb |
| 88 | +dist/foo.min.js 7.45 kb 3.17 kb |
| 89 | +dist/foo.1.min.js 2.91 kb 1.02 kb |
| 90 | +dist/foo.js 22.51 kb 6.67 kb |
| 91 | +dist/foo.0.js 17.27 kb 8.83 kb |
| 92 | +dist/foo.1.js 5.24 kb 1.64 kb |
| 93 | +``` |
| 94 | + |
| 95 | +Now on the page, the user only needs to include Vue and the entry file: |
| 96 | + |
| 97 | +``` html |
| 98 | +<script src="https://unpkg.com/vue"></script> |
| 99 | +<script src="path/to/foo.min.js"></script> |
| 100 | + |
| 101 | +<!-- foo-one's implementation chunk is auto fetched when it's used --> |
| 102 | +<foo-one></foo-one> |
| 103 | +``` |
0 commit comments