-
-
Notifications
You must be signed in to change notification settings - Fork 5.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vendor is too big #2201
Comments
Use https://nuxtjs.org/faq/extend-webpack#how-to-extend-webpack-config- |
@clarkdo |
Maybe sth like: module.exports = {
build: {
extend(config, { dev, isClient }) {
if (isClient) {
const vendor = config.entry.vendor
// vendor2 is separated vendor file
const vendor2 = [
'vue-router',
'vue-meta'
// and what ever you want
]
// remove from existing vendor
config.entry.vendor = vendor.filter(x => !vendor2.includes(x))
config.entry.vendor2 = vendor2
}
}
}
} |
@snoopy83101, pls let me know if @clarkdo 's example is working for you. |
@karmazzin build: {
filenames: {
app: '[name].[chunkhash].js'
}
} |
config.entry.vendor = ... Is it okay to just configure config.entry? I'll try your method. Thank you |
In Nuxt, a module is extracted into the vendor chunk when it's inside node_modules and used in at-least 1/2 of the total pages. common chunks are in |
So, I don't have to think about CommonsChunkPlugin. module.exports = { |
You can also config the |
Combining build. filenames |
@clarkdo I followed above mentioned steps the vendor is still big, and vendor2 is created but so small. |
You can try |
I'm trying to move vuetify, vee-validate to a different bundle. but as above image it shows only 82 byes. This can't be right. |
Could you provide your code ? |
A part from my nuxt.config.js {
...
build: {
analyze: true,
babel: {
plugins: ['transform-decorators-legacy', 'transform-class-properties']
},
filenames: {
app: '[name].[chunkhash].js'
},
extend(config) {
const { vendor } = config.entry;
if (vendor) {
const vendor2 = ['axios', 'vuetify', 'vee-validate'];
config.entry.vendor = vendor.filter(v => !vendor2.includes(v));
config.entry.vendor2 = vendor2;
}
},
vendor: [
'axios',
'vuetify',
'vee-validate',
'nuxt-class-component',
'vue-class-component',
'vue-property-decorator',
'vuex-class'
]
},
// specify additional nuxt plugins
plugins: [
{
src: '~/plugins/vue-notifications',
ssr: false
},
'~/plugins/vee-validate',
'~/plugins/vuetify'
],
...
} |
Can you try to remove // sth like
extend(config) {
if (process.client) {
const plugin = config.plugins.find((plugin) => plugin.filenameTemplate === 'vendor.js')
const old = plugin.minChunks
plugin.minChunks = function (module, count) {
return old(module, count) && !(/(axios)|(vuetify)|(vee-validate)/).test(module.context)
}
}
} |
@clarkdo doesn't seem to work. |
Try 😄 module.exports = {
build: {
extend(config, { isClient }) {
if (isClient) {
const { vendor } = config.entry
const vendor2 = ['axios', 'vuetify', 'vee-validate']
config.entry.vendor = vendor.filter(v => !vendor2.includes(v))
config.entry.vendor2 = vendor2
const plugin = config.plugins.find((plugin) => ~plugin.chunkNames.indexOf('vendor'))
const old = plugin.minChunks
plugin.minChunks = function (module, count) {
return old(module, count) && !(/(axios)|(vuetify)|(vee-validate)/).test(module.context)
}
}
},
filenames: {
app: '[name].[chunkhash].js'
},
vendor: [
'axios',
'vuetify',
'vee-validate'
]
}
} |
That config just made it worse, bundles are now bigger, 😭 too bad I don't know much about webpack. |
It works for me: package.json: {
"name": "nuxt-demo",
"dependencies": {
"axios": "^0.17.1",
"nuxt": "latest",
"vee-validate": "^2.0.3",
"vuetify": "^0.17.6"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
} nuxt.config.js module.exports = {
build: {
extend(config, { isClient }) {
if (isClient) {
const { vendor } = config.entry
const vendor2 = ['axios', 'vuetify', 'vee-validate']
config.entry.vendor = vendor.filter(v => !vendor2.includes(v))
config.entry.vendor2 = vendor2
const plugin = config.plugins.find((plugin) => ~plugin.chunkNames.indexOf('vendor'))
const old = plugin.minChunks
plugin.minChunks = function (module, count) {
return old(module, count) && !(/(axios)|(vuetify)|(vee-validate)/).test(module.context)
}
}
},
filenames: {
app: '[name].[chunkhash].js'
},
vendor: [
'axios',
'vuetify',
'vee-validate'
]
}
} Before: -rw-r--r-- 1 clark staff 455189 1 16 16:44 vendor.837fce96c1f7f2ad2abc.js After: -rw-r--r-- 1 clark staff 142569 1 16 16:43 vendor.4f9def85ed3690acf031.js
-rw-r--r-- 1 clark staff 312724 1 16 16:43 vendor2.69549d11643f13001613.js |
That should because libs in You can take a look at webpack/webpack#4445 (comment) |
@BruceHem Would you please also share |
How about: const webpack = require('webpack')
module.exports = {
build: {
extend(config, { isClient }) {
if (isClient) {
config.entry.vendor = config.entry.vendor.filter(v => !['axios', 'vuetify', 'vee-validate'].includes(v))
config.plugins.unshift(
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
children: true,
async: 'vendor2',
minChunks(module, count) {
return /(axios)|(vuetify)|(vee-validate)/.test(module.context)
}
})
)
}
},
vendor: [
'axios',
'vuetify',
'vee-validate'
]
}
} |
@clarkdo thanks for the examples provided, I'm having the same issue. My vendor chunk is about 800KB. I tried the solutions suggested, in the first case vendor2 is a few bytes, in the second case app and vendor are bigger, as it happened to @BruceHem. @pi0 If I run analyze the interface doesn't show the vendor2 chunk, all the node_modules I associated to it seems to be still under the vendor chunk. Update extend (config, { isClient }) {
if (isClient) {
const { vendor } = config.entry
const vendor2 = ['adyen-cse-js', 'vuelidate', 'elliptic', 'bn.js']
config.entry.vendor = vendor.filter(v => !vendor2.includes(v))
config.entry.vendor2 = vendor2
const plugin = config.plugins.find((plugin) => ~plugin.chunkNames.indexOf('vendor'))
const old = plugin.minChunks
plugin.minChunks = function (module, count) {
return old(module, count) && !(/(adyen-cse-js)|(vuelidate)|(elliptic)|(bn\.js)/).test(module.context)
}
}
},
filenames: {
app: '[name].[chunkhash].js'
},
vendor: [
'vuelidate',
'adyen-cse-js'
] |
@pi0 image below for reference. |
Trello card created (https://trello.com/c/5bL1gNbg/78-vendor-optimizations) |
Thanks to the Nuxt.js Team, you are doing an awesome work! |
@pi0 nice 🖖 |
This definitely needs work. I have less than 10 pages and my I don't feel like I have written so much though. |
Good news: With Webpack 4 vendor will be automatically split into smaller chunks for both perf and long-term caching. We are going to work on it. |
I'm working on an PR about that (webpack 3) |
Updates on this? Vendor bundle is still huge. |
@ALL any update? My vendor is 1.75MB I want to split it :( I don't know how though.. This is part of my
|
@besnikh The reason may be because your config doesn't meet default conditions of the strategy, try to change |
I just updated to
Is there anything that needs to be changed / configured? My |
there's no vendor any more? where to config vendors.app ?
|
You should reopen this issues, since Nuxt 2 have no |
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
config.entry is undefined |
FYI Comment of big |
for me it was just enough to reduce chunk sizes not more than 50 Kib, so I hack it like so: extend (config, ctx) {
if (ctx && ctx.isClient) {
config.optimization.splitChunks.maxSize = 51200
}
} this is my output logs on Hash: 55f650db95c0aedbeaab
Version: webpack 4.41.4
Time: 19182ms
Built at: 12/19/2019 8:28:56 PM
Asset Size Chunks Chunk Names
../server/client.manifest.json 15 KiB [emitted]
0cde51ddddffebfe69e4.js 26.1 KiB 5 [emitted] [immutable] commons.app.5bec50a0
156f5330576e65671f1d.js 22.9 KiB 1 [emitted] [immutable] app.f69643ec
160cec1d41e28590bf6e.js 226 KiB 18 [emitted] [immutable] vendors.app.a2a2526c
238517e577d836f5c0d0.js 64.4 KiB 8 [emitted] [immutable] commons.app.aaac3122
376425dd0a427b29f483.js 15.8 KiB 17 [emitted] [immutable] vendors.app.78934547
3a8b86e990c2c8a1a949.js 25.8 KiB 19 [emitted] [immutable] vendors.app.c1e9ae2e
423a295fbea8fa5666ec.js 13.1 KiB 9 [emitted] [immutable] commons.app.d939e436
4f7286dd41f72a49b6e5.js 14.3 KiB 3 [emitted] [immutable] commons.app.253ae210
5165ef6d7ba2a603815b.js 14.7 KiB 2 [emitted] [immutable] commons.app.0605657e
5cf237a5a2cd21c7b478.js 28.6 KiB 16 [emitted] [immutable] vendors.app.74e9f0c9
603f0a39e70c50006343.js 16.4 KiB 14 [emitted] [immutable] vendors.app.1655f327
6d3100c4946db9800ced.js 9.48 KiB 20 [emitted] [immutable] vendors.app.c964cbd5
7559d7be9c8cb40cba33.js 15.5 KiB 21 [emitted] [immutable] vendors.app.ce053847
LICENSES 571 bytes [emitted]
a3e7a86e0cfea400b019.js 15.1 KiB 22 [emitted] [immutable] vendors.app.d939e436
a4df04ec317d52b2f100.js 2.18 KiB 11 [emitted] [immutable] pages/index.31ecd969
a57aa1fcf1c9dfeb2548.js 20.7 KiB 0 [emitted] [immutable] app.24120820
c3fa29ab46b642fc22be.js 38.2 KiB 15 [emitted] [immutable] vendors.app.24f645c1
d4d4e98c0163682fe1cc.js 10.3 KiB 10 [emitted] [immutable] commons.app.fdc6512a
d736b41f2151ef8b55c2.js 8.89 KiB 7 [emitted] [immutable] commons.app.678f84af
d95f06092007a91d3ea0.js 15.8 KiB 4 [emitted] [immutable] commons.app.2a42e354
e46d9b1a3cf3197879a8.js 28.5 KiB 13 [emitted] [immutable] vendors.app.11c2601a
feb4891a9784216e4451.js 13.8 KiB 6 [emitted] [immutable] commons.app.5c956a7a
runtime.8300a73d8568ed857bdb.js 2.31 KiB 12 [emitted] [immutable] runtime
+ 2 hidden assets
Entrypoint app = runtime.8300a73d8568ed857bdb.js 4f7286dd41f72a49b6e5.js d95f06092007a91d3ea0.js
423a295fbea8fa5666ec.js feb4891a9784216e4451.js d736b41f2151ef8b55c2.js d4d4e98c0163682fe1cc.js
5165ef6d7ba2a603815b.js 0cde51ddddffebfe69e4.js 238517e577d836f5c0d0.js a3e7a86e0cfea400b019.js
376425dd0a427b29f483.js 603f0a39e70c50006343.js 5cf237a5a2cd21c7b478.js 7559d7be9c8cb40cba33.js
3a8b86e990c2c8a1a949.js 6d3100c4946db9800ced.js e46d9b1a3cf3197879a8.js c3fa29ab46b642fc22be.js
160cec1d41e28590bf6e.js a57aa1fcf1c9dfeb2548.js 156f5330576e65671f1d.js
Hash: e8905e5151dbbb6711f0
Version: webpack 4.41.4
Time: 12291ms
Built at: 12/19/2019 8:29:08 PM
Asset Size Chunks Chunk Names
8495f3a3db1592ed83bc.js 1.63 KiB 1 [emitted] [immutable] pages/index
server.js 410 KiB 0 [emitted] app
server.manifest.json 145 bytes [emitted]
Entrypoint app = server.js
ℹ Generating pages 20:29:09
✔ Generated / Regards, |
@daggerok How about the entry point too big? Your solution worked though. But I dont know what is entry point? |
@mandaputtra |
@daggerok |
@daggerok solution is working awesome
|
Vendor is too big,
How to split into two files?
nuxt.config.js
only one build.vendor .....
I need more than one common file
The text was updated successfully, but these errors were encountered: