I build my VueJS app with vue-cli-service build --mode production, and my chunk-vendors.js weighs 3.2M.
So I decided to investigate why it's so heavy, using vue ui.
Then, I simply click on Build, and I see that chunk-vendors.js is now 1.0M !
Why is there a such difference between these two build?
Here the screenshots:
Thank you for you help!
vue ui's build command is this:
vue-cli-service build --mode production --target app --no-module --dashboard
Notice the --no-module flag, which turns off modern browser builds, which is enabled by default as of Vue CLI 5.0.0. Therefore, the command you're using (i.e., without --no-module) creates a modern build, which includes transpiled code and polyfilled bundles for legacy browsers in addition to slimmer code for modern browsers that don't require the polyfills. On the other hand, vue ui only builds the latter.
Related
Is there a difference between nuxt start + nuxt preview?
And is it correct to start a server with an ssr nuxt app in production mode with:
npm run build (nuxt build)
npm run start (nuxt start) ?
For me, the docs are a little bit confusing, https://v3.nuxtjs.org/api/commands/preview/
"The preview command starts a server to preview your Nuxt application after running the build command."
There are mainly 4 things:
nuxt dev, purely for development purposes
nuxt build for SSR or nuxt generate for SSG
nuxt preview to get a preview locally of what would the final bundle look like
nuxt start what should be running on the actual production server
At the end, Nuxt's team made this simple for us by detecting the platform you're pushing your code too. But at the end, you could have nuxt ship or nuxt yoloooo doing the exact same thing, it all depends of your own preferences.
Most of the defaults are adapting or overriding some possible mistakes by analyzing what are your project's settings and reacting accordingly.
Depending on where you deploy your app, you can get various behaviors as explained in the doc: https://v3.nuxtjs.org/getting-started/deployment
If you want to deploy your app on Heroku (SSR), your nuxt start command will look something like this
"scripts": {
"build": "nuxt build",
"start": "node .output/server/index.mjs"
}
as shown here: https://nitro.unjs.io/deploy/providers/heroku
If you're publishing your code to some SSG platform, it will usually use a "lighter Nginx/Apache server" for free and do basically the same as serve for your static assets (with nuxt start).
The only thing NOT to do is to ship a nuxt dev on production.
So I have a monorepo that has some Vue apps inside of it, and one package that exports Vue components.
When I want to start the app, I need to build the package that the app is dependent on.
Command is: vue-cli-service build --target lib src/index.ts
When I work on the app & package simultaneously, it is really annoying to have to run the build after each change to the package.
Is there a way to have it as hot/live build which when there are changes it will trigger a build for the package?
I am trying to build my app in development mode and am running this script:
ionic capacitor run ios
But every time it says building in production mode? Am I missing something? Shouldn't it only build production if I use the --prod flag?
I found that I need to use:
ionic capacitor run ios -- --mode development
https://cli.vuejs.org/guide/cli-service.html
vue-cli-service build produces a production-ready bundle in the dist/ directory, with minification for JS/CSS/HTML and auto vendor chunk splitting for better caching. The chunk manifest is inlined into the HTML.
Check your angular.json configuration file and ensure that configurations is set for dev environments.
Was having some trouble with building a shared app/package in vueJS, the app is using vuetify, what is interesting is that the built code contains almost everything except for v-tooltip that is inside v-menu. The commands I tried were vue-cli-service build and then vue-cli-service build --target lib --name em-common-vue ./src/main.js.
I should note that I have been using this app with no issues until now!
Any idea why my build version is missing code?
vue 2.6.10
vuetify 1.5.14
Using the usual vue-cli-service build only includes dependencies actually used by the app.