在 webpack 4 vue cli 3 中禁用缓存加载器
Posted
技术标签:
【中文标题】在 webpack 4 vue cli 3 中禁用缓存加载器【英文标题】:Disable cache-loader in webpack 4 vue cli 3 【发布时间】:2019-07-22 11:57:57 【问题描述】:我正在使用 vue-cli 3/webpack 4 项目。 我的构建是在 AWS Codebuild 上生成的,它为每个构建启动一个新的 VM 实例。 webpack 中的 Cache -loader 缓存 babel-loader、vue-loader 和 terser 的结果。但是由于我每次都运行一个新的实例虚拟机,所以我没有利用这一点。 如果缓存本身有一些开销,最好按照这里的建议关闭它。
如何通过 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'
]
【问题讨论】:
【参考方案1】:一种解决方案是根据条件完全或仅在生产/开发中禁用缓存。 为了使用它,打开你的 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');
//
,
在这个例子中,我已经注释掉了条件,所以根本没有使用缓存加载器。
【讨论】:
【参考方案2】:如果你通过路由挂载 vue 组件,你会尝试将组件导入异步方式吗?不是同步方式。
当router/index.js
加载..
那么可能会对你有所帮助。
例如
component: () => (
component: import('@/views/your/pageComponent.vue'),
loading: this.loading,
error: this.error,
delay: this.delay,
timeout: this.timeout,
)
【讨论】:
以上是关于在 webpack 4 vue cli 3 中禁用缓存加载器的主要内容,如果未能解决你的问题,请参考以下文章
vue-cli2.0和vue-cli3.0中当发布到生产环境时禁用console.log
禁用 vue-cli webpack 编码图像 base64
vue-loader:如何在 webpack 4 和 vue-cli3 中使用 vue-loader v15