Using the usual vue-cli-service build only includes dependencies actually used by the app.
Related
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 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.
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
I'm having some trouble with how yarn link works in conjunction with webpack. I'm developing a components library that I'm using in a different application. For development I want to use yarn link to see my components working in my application.
In my components library I have react in peerDependencies and devDependencies because I need react for running tests for instance.
Now when I bundle my application react is bundled twice because webpack resolves react in my components library to its own node_modules instead of the application I'm using it in. This results in a react error saying that react is available twice.
How can I make sure webpack only bundles react once when using yarn link?
I'm using a self made component library to share components between my projects. The problem is that even after using the Authoring libraries guide by webpack it keeps including those dependencies in my main build and I am out of ideas on what setting that this is caused by...
Build analysis (when bundling my app)
Here you can see the node_modules and wizer-components/node_modules. Including react-dom twice (and others)
Build analysis (of a component)
As you can see no node_modules are bundled here...
Setting files
Because I can't find where the issue lies I have created gists of my config files:
webpack.config.js (of component library)
webpack.config.production.js (of app)
Setup
Just as info, I'm using a monorepo setup with lerna to npm link the dependency of (wizer-components) without the need to push it to npm as a module. Could this be an issue in where webpack thinks that it needs to re-add the react (and others)?
After a total of 4 days of trying to make this work (was doing this before I asked the question), I managed to solve it (FINALLY)!
The issue was with lerna / NPM link and dependency resolving, see handy links at the bottom of this answer.
I fixed it by doing the following steps:
Moving the dependencies (react, react-dom) to peerDependencies in the wizer-components (my component library) package.json file
Removing all my node_modules folders (app and component library)
Running $ lerna bootstrap to re-download my node_modules
Removing my build process of my component library (I build these when I build my app)
Changing my webpack.config.production.js in these key areas
(did a picture because it wouldn't format it right on here -_-
Helpful links (also look at the comments):
How to avoid React loading twice with Webpack when developing
npm link doesn't play nice with peer dependencies
How to avoid loaded two copies of React error when developing an external component?