vue大型项目(webpack 4.x)本地开发构建速度优化之cache-loader，亲测有效

最新推荐文章于 2025-11-11 04:20:41 发布

原创最新推荐文章于 2025-11-11 04:20:41 发布 · 507 阅读

CC 4.0 BY-SA版权

文章标签：

前言
cache-loader是webpack在打包编译过程中对打包的文件设置的缓存策略。它会在每次加载源文件之前检查是否有已缓存的结果，如果存在，则直接复用，否则才执行实际的加载操作并保存结果到缓存中。这种设计模式对于频繁变动的代码库尤其有用，因为大部分文件在多次构建时通常是不变的。

1、安装依赖

npm i cache-loader -D

2、在vue.config.js文件中，找到chainWebpack加入如下配置

module.exports = {
	chainWebpack: (config) => {
		if (process.env.NODE_ENV === 'development') {  // 只针对开发环境
	      // ========== JavaScript 文件配置 ==========
	      config.module
	        .rule('js')
	        .test(/\.m?jsx?$/)
	        .use('cache-loader')
	        .loader('cache-loader')
	        .before('babel-loader') // 确保在 babel-loader 之前
	        .end()
	      // ========== TypeScript 文件配置 ==========
	      config.module
	        .rule('ts')
	        .test(/\.tsx?$/)
	        .use('ts-loader')
	        .loader('ts-loader')
	        .options({
	          appendTsSuffixTo: [/\.vue$/],
	          transpileOnly: true // 建议开启以提高性能
	        })
	        .end()
	        .use('babel-loader')
	        .loader('babel-loader')
	        .end()
	        .use('cache-loader')
	        .loader('cache-loader')
	      // ========== Vue 文件配置 ==========
	      config.module
	        .rule('vue')
	        .use('cache-loader')
	        .loader('cache-loader')
	        .before('vue-loader')
	        .end()
	    }
	})
}