I’m experiencing issues with the splitChunks option for the bud config. I’m trying to optimise the page speed of our site by splitting the code into several chunks. From what I’ve read in the docs, the splitChunks function should take any webpack split chunks config. However, given the config below, the code is only split up into a single (and large) vendor file and a single app.js file. If I look at the webpack config, it should have split them up into several chunks each but nothing seems to happen. I’ve tried various other config options but all to no avail.
Could anyone give me a hand and let me know what I’m missing?
This is the bud config:
module.exports = async (app) => {
app
.entry({
app: ['@scripts/main', '@styles/app'],
editor: ['@scripts/editor', '@styles/editor'],
})
/* assets, watch, proxy and serve here */
.splitChunks({
chunks: 'async',
minSize: 20000,
minRemainingSize: 0,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
})
.hooks.async('build.resolve.alias', async (aliases) => ({
...(aliases ?? {}),
vue: 'vue/dist/vue.esm-bundler.js',
}));
};
The build output of running bud build --clean --mode production
┌ assets ─────────────────────────────────────────────────────────────────────────────────────┐
│ │
│ │
│ ⚡ vendor/app vendor/app.8f1456.js 490.61 kB │
│ app app.480c57.css 139.23 kB │
│ ⚡ app app.11a9b7.js 106.08 kB │
│ ⚡ editor editor.1054b3.js 3.52 kB │
│ runtime runtime.c8bd56.js 1.51 kB │
│ editor editor.31d6cf.css 0 bytes │
│ ᠃ resources/fonts/HelveticaNeue.woff 46.53 kB │
│ ᠃ resources/fonts/HelveticaNeue.woff2 32.72 kB │
│ ᠃ resources/fonts/akira.woff 9.1 kB │
│ ᠃ manifest.json 395 bytes │
│ ✔ ᠃ entrypoints.json 185 bytes │
│ ✔ ᠃ wordpress.json 33 bytes │
│ │
│ │
└──────────────────────────────────────────────────────────────────────────────────────────┘