yarn build --mode=staging produces an incomplete background.js file in the zipped artifact.
yarn build --mode=staging
```bash
$ yarn build --mode=staging
yarn run v1.19.2
$ vue-cli-service build --mode=staging
⠙ Building for staging...[WER-W1] function(obj) {
obj || (obj = {});
var __t, __p = '';
with (obj) {
__p += 'Warning, Extension Reloader Plugin was not enabled! It runs only on webpack --mode=development (v4 or more) or with NODE_ENV=development (lower versions)';
}
return __p
}.
Visit https://github.com/rubenspgcavalcante/webpack-extension-reloader/wiki/General-Information#WER-W1 for complete details
⠸ Building for staging... WARN No key.pem file found. This is fine for dev, however you may have problems publishing without one
⠴ Building for staging...
WARNING Compiled with 3 warnings 11:47:57 AM
warning
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
js/chunk-vendors.js (2.14 MiB)
../artifacts/extension-v1.3.18-staging.zip (794 KiB)
warning
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
popup (2.27 MiB)
css/chunk-vendors.css
js/chunk-vendors.js
css/chunk-common.css
js/chunk-common.js
css/popup.css
js/popup.js
options (2.26 MiB)
css/chunk-vendors.css
js/chunk-vendors.js
css/chunk-common.css
js/chunk-common.js
css/options.css
js/options.js
standalone (2.3 MiB)
css/chunk-vendors.css
js/chunk-vendors.js
css/chunk-common.css
js/chunk-common.js
css/standalone.css
js/standalone.js
background (2.26 MiB)
css/chunk-vendors.css
js/chunk-vendors.js
css/chunk-common.css
js/chunk-common.js
js/background.js
content_scripts/content (2.26 MiB)
css/chunk-vendors.css
js/chunk-vendors.js
css/chunk-common.css
js/chunk-common.js
js/content_scripts/content.js
console (2.26 MiB)
css/chunk-vendors.css
js/chunk-vendors.js
css/chunk-common.css
js/chunk-common.js
js/console.js
warning
webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
File Size Gzipped
dist/js/chunk-vendors.js 2190.61 KiB 601.70 KiB
dist/EBML.js 237.93 KiB 54.33 KiB
dist/js/chunk-common.js 71.10 KiB 19.42 KiB
dist/js/standalone.js 45.53 KiB 14.01 KiB
dist/js/popup.js 18.61 KiB 6.54 KiB
dist/js/background.js 17.24 KiB 6.86 KiB
dist/js/options.js 11.44 KiB 4.64 KiB
dist/js/console.js 10.11 KiB 4.04 KiB
dist/js/content_scripts/content.js 8.91 KiB 3.61 KiB
dist/css/chunk-vendors.css 36.43 KiB 7.18 KiB
dist/css/chunk-common.css 3.63 KiB 1.17 KiB
dist/css/standalone.css 3.13 KiB 1.04 KiB
dist/css/popup.css 1.01 KiB 0.44 KiB
dist/css/options.css 0.50 KiB 0.26 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
```
yarn build --mode=stagingproduces an incomplete background.js file in the zipped artifact.yarn build --mode=staging
```bash $ yarn build --mode=staging yarn run v1.19.2 $ vue-cli-service build --mode=staging ⠙ Building for staging...[WER-W1] function(obj) { obj || (obj = {}); var __t, __p = ''; with (obj) { __p += 'Warning, Extension Reloader Plugin was not enabled! It runs only on webpack --mode=development (v4 or more) or with NODE_ENV=development (lower versions)'; } return __p }. Visit https://github.com/rubenspgcavalcante/webpack-extension-reloader/wiki/General-Information#WER-W1 for complete details ⠸ Building for staging... WARN No key.pem file found. This is fine for dev, however you may have problems publishing without one ⠴ Building for staging... WARNING Compiled with 3 warnings 11:47:57 AM warning asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: js/chunk-vendors.js (2.14 MiB) ../artifacts/extension-v1.3.18-staging.zip (794 KiB) warning entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: popup (2.27 MiB) css/chunk-vendors.css js/chunk-vendors.js css/chunk-common.css js/chunk-common.js css/popup.css js/popup.js options (2.26 MiB) css/chunk-vendors.css js/chunk-vendors.js css/chunk-common.css js/chunk-common.js css/options.css js/options.js standalone (2.3 MiB) css/chunk-vendors.css js/chunk-vendors.js css/chunk-common.css js/chunk-common.js css/standalone.css js/standalone.js background (2.26 MiB) css/chunk-vendors.css js/chunk-vendors.js css/chunk-common.css js/chunk-common.js js/background.js content_scripts/content (2.26 MiB) css/chunk-vendors.css js/chunk-vendors.js css/chunk-common.css js/chunk-common.js js/content_scripts/content.js console (2.26 MiB) css/chunk-vendors.css js/chunk-vendors.js css/chunk-common.css js/chunk-common.js js/console.js warning webpack performance recommendations: You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application. For more info visit https://webpack.js.org/guides/code-splitting/ File Size Gzipped dist/js/chunk-vendors.js 2190.61 KiB 601.70 KiB dist/EBML.js 237.93 KiB 54.33 KiB dist/js/chunk-common.js 71.10 KiB 19.42 KiB dist/js/standalone.js 45.53 KiB 14.01 KiB dist/js/popup.js 18.61 KiB 6.54 KiB dist/js/background.js 17.24 KiB 6.86 KiB dist/js/options.js 11.44 KiB 4.64 KiB dist/js/console.js 10.11 KiB 4.04 KiB dist/js/content_scripts/content.js 8.91 KiB 3.61 KiB dist/css/chunk-vendors.css 36.43 KiB 7.18 KiB dist/css/chunk-common.css 3.63 KiB 1.17 KiB dist/css/standalone.css 3.13 KiB 1.04 KiB dist/css/popup.css 1.01 KiB 0.44 KiB dist/css/options.css 0.50 KiB 0.26 KiB Images and other types of assets omitted. DONE Build complete. The dist directory is ready to be deployed. INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html ```
vue.config.js
```bash pluginOptions: { browserExtension: { modesToZip: ['production', 'staging'], components: { background: true, popup: true, options: true, contentScripts: true, standalone: true, }, componentOptions: { background: { entry: 'src/background.js', }, contentScripts: { entries: { 'content_scripts/content': 'src/content_scripts/content.js', console: 'src/content_scripts/console.js', }, }, }, }, }, ```