Webpack configuration is a part of Vue CLI setup (can be checked with vue inspect
). This is a relevant part of it:
entry: {
foo: [
'.../src/foo.js'
],
barWidget: [
'.../src/barWidget.js'
],
},
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
name: 'chunk-vendors',
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: 'initial'
},
common: {
name: 'chunk-common',
minChunks: 2,
priority: -20,
chunks: 'initial',
reuseExistingChunk: true
}
}
},
...
And HTML output is:
<script type="text/javascript" src="/assets/js/chunk-vendors.[HASH].js"></script>
<script type="text/javascript" src="/assets/js/foo.[HASH].js"></script>
and
<script type="text/javascript" src="/assets/js/chunk-vendors.[HASH].js"></script>
<script type="text/javascript" src="/assets/js/barWidget.[HASH].js"></script>
There's no problem for foo
to have as many script tags as needed, but barWidget
is widget entry point that is supposed to be loaded at once with no initial chunk dependencies. My intention is to make barWidget
be loaded with a single line of code (hash will likely be disabled for this purpose):
<script type="text/javascript" src="/assets/js/barWidget.js"></script>
But in its current state it fails to load if chunk-vendors
is omitted.
I'd prefer to keep vendors
and common
chunks as they are because they are splitted in a reasonable way and can be reused on client side between entry points, but I need barWidget
to auto-load a chunk it depends on. A less preferable way would be to disable chunks but for barWidget
only, chunk splitting in other entry points should remain unchanged.
A way to reproduce it is basically a new Vue CLI project with 2 entry points added, or any Webpack project with similarly configured splitting.
Here is the project (listed for completeness):
package.json
{
"name": "foobar",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0"
}
}
vue.config.js
module.exports = {
pages: {
foo: {
entry: 'src/foo.js',
template: 'public/foo.html',
filename: 'foo.html'
},
barWidget: {
entry: 'src/barWidget.js',
template: 'public/barWidget.html',
filename: 'barWidget.html'
},
},
};
public/foo.html
public/barWidget.html
<!DOCTYPE html>
<html>
<body>
<div id="app"></div>
</body>
</html>
src/foo.js
import { createApp } from 'vue'
import Foo from './Foo.vue'
createApp(Foo).mount('#app')
Foo.vue
<template>
<HelloWorld msg="Foo"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
components: {
HelloWorld
}
}
</script>
src/barWidget.js
import { createApp } from 'vue'
import BarWidget from './BarWidget.vue'
createApp(BarWidget).mount('#app')
BarWidget.vue
<template>
<HelloWorld msg="Bar widget"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
components: {
HelloWorld
}
}
</script>
Can
barWidget
be forced to automatically loadchunk-vendors.[HASH].js
by means of Webpack, without loading it explicitly in the place wherebarWidget.[HASH].js
is being used?Can
barWidget
entry point be forced to not use other initial chunks (chunk-vendors
, etc) and output self-sufficientbarWidget.js
bundle, without affecting the way splitting works in other entry points?Are there other options for the described scenario?
barWidget
depends onnode_modules
there's obviously no way considering avendor
cache group defined. Generally it's hard to say anything without minimal reproducible test case – EnaenablebarWidget
entry, ifbarWidget.js
imports anything fromnode_modules
, then vendor chunk will be created. Or if some other code is including something fromnode_modules
(i.e. something from webpack config). It's likely that "vendor" chunk won't be created if nothing needs it for the entry, but it looks like that's not the case, so you need to find why code fromnode_modules
is needed for thebarWidget
entry – Enaenablevue
itself. To make it clear, the reason why vendor chunk is produced is obvious (same for other possible initial chunks), the question is how to make it unnecessary to explicitly load chunk-vendors.js with<script>
or else where a specific bundle is being used. I provided a project for completeness, it's currently based on Vue CLI setup with described Webpack config under the hood. – Injureimport
. – Injure