Vue配置自动打包并增量更新

·  阅读 90

你是否也受到这样的困扰:代码做了一点小改动,只变化了一个或几个文件,当需要更新到正式环境时,却每次都需要替换整个包

这样不仅使得部署时需要替换大量文件,且更新之后,缓存文件失效,用户需要重新请求,大大降低了性能。

于是我去搜索了一下,找到了一个大佬的dist包增量更新方案:

1、通过对比打包后文件名称中的hash值,找到修改了的文件

2、将修改了的文件放入distAdd文件夹,将需要删除(即用修改了的文件去替换)的文件名放在distDel.txt中

3、部署时只需将distAdd文件夹放入服务器目录,并将distDel.txt中的文件删除即可。

此处附一下原文链接:blog.csdn.net/dwj1212/art…

配置流程

一、 设置打包文件命名规则

我们先来了解下几种常用的命名规则:

  • 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 就可以实现增量更新啦。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改