How to decrease the amount of memory used during vue-cli build?

Viewed 301

After following vue 3 code-splitting techniques by dynamically importing vue components in their own chunks the RAM usage has increased quite a bit From peaking around 45% to 86%. Each imported file has a unique webChunkName to make then identifiable and a hash for cache breaking.

At first not knowing about vue 3's defineAsyncComponent I was creating promises and executing them when building the vue app but the build process was being killed and a out of memory error appeared. Then after applying defineAsyncComponent it started to work again without being killed but its still getting really close.

So a component import looks like this for me:

createApp(defineAsyncComponent(() => import(/* webpackChunkName: "component-1" */ '../Component1')))

Here is the vue.config.js I have set:

module.exports = {
    outputDir: '/static/build',
    publicPath: '/static/build/',
    filenameHashing: false,
    lintOnSave: false,
    css: {
        extract: {
            filename: 'css/[name].css',
            chunkFilename: 'css/[name].[contenthash].css'
        }
    },
    configureWebpack: {
        plugins: [
            new MomentLocalesPlugin(), // To strip all locales except “en”
            new MomentTimezoneDataPlugin({
                matchZones: ['UTC', 'America/Los_Angeles', 'America/Denver', 'America/Chicago', 'America/New_York'],
            }),
        ],
        output: {
            filename: 'js/[name].js', // name of initial file app.js
            chunkFilename: 'js/[name].[contenthash].js'
        },
    },
}

I also noticed when building webpack creates combo chunks like component-1~component-2~component-3~component-4~component-5~8cc5dff4.eaasdffcbd3fbd58cf515.js Even though there are already individual build files for each of those components.

Is there anything that could be causing the major increase in memory usage during the build or is there anything that I could do to increase performance so it doesnt start killing it again as the application continues to grow?

0 Answers
Related