我正在使用 vue-cli 3/webpack 4 项目。 我的构建是在 AWS Codebuild 上生成的,它为每个构建启动一个新的 VM 实例。 webpack中的cache-loader缓存了babel-loader、vue-loader和terser的结果。但是因为我每次都运行一个新的实例 VM,所以我没有利用它。 如果缓存本身有一些开销,我最好将其关闭,然后按照此处等某些地方的建议。
如何通过 vue.conf 对象配置 webpack 以移除缓存加载器。 谢谢
我的项目为生产环境生成的 webpack 配置是
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'
}
]
}
最佳答案
一种解决方案是根据条件完全或仅在生产/开发中禁用缓存。 为了使用它打开你的 vue.config-js 并在那里写
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');
// }
},
在这个例子中,我已经注释掉了条件,所以根本没有使用缓存加载器。
关于caching - 在 webpack 4 vue cli 3 中禁用缓存加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54927896/