Disable cache-loader in webpack 4 vue cli 3 - caching

Question

I am using a vue-cli 3/webpack 4 project .
My build is generated on AWS Codebuild which starts a new VM instance for each build.
Cache -loader in webpack caches the results of babel-loader, vue-loader and terser. But since I run a new instance VM every time I don’t take advantage of this.
If the caching itself has some overhead ,it’s better I turn it off then as suggested in some places like here.
How do I configure webpack via vue.conf object to remove the cache loader .
Thanks
My project generated webpack config for production is
rules: [
/* config.module.rule('vue') */
{
test: /\.vue$/,
use: [
/* config.module.rule('vue').use('cache-loader') */
{
loader: 'cache-loader',
options: {
cacheDirectory: '/Users/digitalsuppliers/work/new_build_branch/bmsconsole-client/node_modules/.cache/vue-loader',
cacheIdentifier: '22f91b09'
}
},
/* config.module.rule('vue').use('vue-loader') */
{
loader: 'vue-loader',
options: {
compilerOptions: {
preserveWhitespace: false
},
cacheDirectory: '/Users/digitalsuppliers/work/new_build_branch/bmsconsole-client/node_modules/.cache/vue-loader',
cacheIdentifier: '22f91b09'
}
}
]
},
{
test: /\.jsx?$/,
exclude: [
function () { /* omitted long function */ }
],
use: [
/* config.module.rule('js').use('cache-loader') */
{
loader: 'cache-loader',
options: {
cacheDirectory: '/Users/digitalsuppliers/work/new_build_branch/bmsconsole-client/node_modules/.cache/babel-loader',
cacheIdentifier: 'e8179b56'
}
},
/* config.module.rule('js').use('thread-loader') */
{
loader: 'thread-loader'
},
/* config.module.rule('js').use('babel-loader') */
{
loader: 'babel-loader'
}
]
}

Answer 1

One solution is to disable cache either completely or only in production/development based on condition.
In order to use it open your vue.config-js and write there
module.exports = {
chainWebpack: config => {
// disable cache for prod only, remove the if to disable it everywhere
// if (process.env.NODE_ENV === 'production') {
config.module.rule('vue').uses.delete('cache-loader');
config.module.rule('js').uses.delete('cache-loader');
config.module.rule('ts').uses.delete('cache-loader');
config.module.rule('tsx').uses.delete('cache-loader');
// }
},
In this example I've commented out the condition, so cache-loader is not used at all.

Answer 2

if you mount the vue-component by routing, would you trying to import component to async-way? not sync-way.
when router/index.js loaded..
then may be help you.
ex.
component: () => ({
component: import('#/views/your/pageComponent.vue'),
loading: this.loading,
error: this.error,
delay: this.delay,
timeout: this.timeout,
})