你是否也受到这样的困扰：代码做了一点小改动，只变化了一个或几个文件，当需要更新到正式环境时，却每次都需要替换整个包
这样不仅使得部署时需要替换大量文件，且更新之后，缓存文件失效，用户需要重新请求，大大降低了性能。
于是我去搜索了一下，找到了一个大佬的dist包增量更新方案：
1、通过对比打包后文件名称中的hash值，找到修改了的文件
2、将修改了的文件放入distAdd文件夹，将需要删除（即用修改了的文件去替换）的文件名放在distDel.txt中
3、部署时只需将distAdd文件夹放入服务器目录，并将distDel.txt中的文件删除即可。
此处附一下原文链接：https://blog.csdn.net/dwj1212/article/details/112515550
配置流程
一、设置打包文件命名规则
我们先来了解下几种常用的命名规则：
- hash：项目级别，所有文件的文件hash值都是一样的。如果只改了其中一个文件，打包之后的所有文件的hash值都会变，浏览器请求时会重新全部再请求一次
- chunkhash：chunk级别，根据不同的入口文件进行依赖关系解析，构建对应的chunk，生成的对应的哈希值。chunk中的其中一个文件修改了，跟这个chunk相关的都会修改。
- contenthash: 是针对文件内容的，只有模块内容变了，hash值才会变。与chunkhash不同，只会改变修改了的文件。
结合需求，我们选择改动最小的一种规则，也就是contenthash，因为它是针对文件级别的，文件改变了，hash值才会变，这样就根据前后的hash值判断文件是否改变，做增量更新了。
chainWebpack: (config) => {
if (process.env.NODE_ENV === "production") {
config.output.filename(`static/js/[name]-[contenthash:8].js`).end();
config.output.chunkFilename(`static/js/[name]-[contenthash:8].js`).end();
config.output.sourceMapFilename(
"sourceMap/[name]-[contenthash:8].map.js"
);
config.plugin("extract-css").tap(() => [
{
filename: `static/css/[name]-[contenthash:8].css`,
chunkFilename: `static/css/[name]-[contenthash:8].css`,
},
]);
}
}
contenthash:8表示生成的hash值为8位
二、配置打包命令
1、把大佬附的代码（compare.py）cv一份放在项目根目录下，这里我用的是python版本的(没有python环境的需要先安装)，我将上一版本的打包文件命名修改为"dist-old"（原文是dist1）。
2、这里我又在项目根目录新建了一个build.py，将原有的旧dist包重命名为dist-old，并执行打包命令，生成新的dist包，然后再执行compare.py：
#打包
from pathlib import Path
import time
import os
print('\n开始打包')
dir = Path(os.getcwd()+'\\dist')
dir_old = Path(os.getcwd()+'\\dist-old')
now_time = time.strftime('%Y-%m-%d(%H-%M)', time.localtime())
new_name = 'dist-old-'+now_time
#存在dist-old 改名
if dir_old.exists():
os.rename('dist-old', new_name)
#存在dist 改名
if dir.exists() and dir.is_dir():
os.rename('dist', 'dist-old')
a = os.system('npm run build')
if a == 0:
print('打包成功');
os.system('python compare.py')
2、修改package.json，在scripts中添加命令:
"build:add": "python build.py"
经过上述配置，在修改了代码之后，直接执行 npm run build:add 就可以实现增量更新啦。
