在日常的开发中，经常会遇到项目代码体积越来越大，在开发过程经常卡慢，这对于我们前端调试样式其实是很考验心态的，下面就给大家分享一种给vue-cli项目提高开发过程的构建速度，最简单最有效的方法：

 

一. 构建速度优化的思路

1.减少构建目标：利用缓存提升二次构建速度、分包DllPlugin&DllReferencePlugin等，通过减少构建时所需要处理的文件，来加快优化速度。

2.并行处理和多线程构建：thread-loader多进程加快构建速度

3.减少不必要的构建步骤

二.利用缓存提升二次构建速度

（简单的说，其实就是之前的一些打包文件，如果不变的文件直接在内存/硬盘获取即可）

背景：

 1.cache默认生成在node_modules文件下,通过SHA或者base64编码之前的文件处理结果,并保存文件映射关系,方便下一次处理文件时可以查看之前同文件是否有可用缓存,默认存放在存中,可以修改将缓存存放到硬盘中。

2.Webpack4在运行时是有缓存的,只不过缓存只存在于内存中。所以,一旦Webpack的运行程序被关闭,这些缓存就丢失了。这就导致我们npm run start/build的时候相本无缓存可用。而在weppack5中,cache配置除了原本的true和false外,还增加了许多子配置项.可以以将缓存文件存储在硬盘中。

   -type:缓存类型。值为'memory'或'filesystem',分别代表基于内存的临时缓存,以及基于文件系统的持久化缓存。在选择filesystem的情况下,下面介绍的其他属性生主效。

   -cacheDirectory:缓存目录。默认目录为node_modules/.cache/webpack

   -name:缓存名称。同时也是cacheDirectory中的子目录命名,默认值为Webpack的${config.name}-${config.mode}。

   -cacheLocation:缓存真正的存放地址。默认使用的是是上述两个属性的组合:

官网有相关的说明：

修改配置文件vue.config.js：

module.exports = {
         //其它配置项
         cache: process.env.NODE_ENV === 'development' ? {
            type: 'filesystem',
            name: 'vue-item-cache' //自定义生成的缓存文件夹名称
        } : false
  }

效果：

构建速度飞快, 7000 ms  -> 1000 ms。

总结：

1.即使vue-cli已经默认有使用缓存来加快构建速度，但是实际开发中，开发人员仍然需要用一定的优化手段来解决构建速度的问题。

2. 生产环境最好关闭缓存, 一方面不需要生产环境更加注重的是页面性能，另一方面是生产环境下的构建需要最新的文件，防止缓存可能带来的问题。