浅谈Vue前端项目打包

说在前面

目前我们项目，前端在打包并重新发布之后，系统经常会提示加载的页面发生异常，如下图：

此时用户需要清除浏览器缓存，然后刷新才能看到正确的页面，目前项目处于测试阶段，等到真正部署并交由用户使用后，这种情况体验是比较差的。

原因分析

发生这种问题的原因，可能是加载的页面资源找不到了，但是为什么必须要清除缓存才可以解决问题呢？

通过本地打包，发现打包之后的目录结构如下：

通过上图可以发现，每次打包后生成的文件都是类似数字的命名方式，也就是说，下一次内容更新后，几乎仍然是此类数字命名的方式，两次打包的文件名称是相同的。举个例子，由于之前浏览器缓存的原因，10.js已经缓存在本地了，但是第二次打包后，10.js的内容很可能改变了，此时仍从缓存中读取10.js就有可能会导致一些错误，所以此时需要清除浏览器缓存才可以解决问题。

项目打包方式

在实际使用过程中，通过查看package.json文件可以查看目前有两种打包方式：

"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",

按照含义，npm run build:prod负责打生产环境的包，npm run build:stage负责打测试环境的包。

可以发现，在项目的根目录下有.env.development,.env.production,.env.staging三个文件，webpack会根据执行的命令来读取不同的配置文件。webpack识别的方式就是通过mode xx后面的内容，可以发现mode staging和env.staging就是对应上的。

可以通过配置一下输出文件夹来确认下上述内容，修改vue.config.js中的outputDir内容为:

outputDir: process.env.VUE_APP_FILE_Name,

然后在三个环境中定义不同的VUE_APP_FILE_Name变量，根据打包输出文件夹名称可以知道：

npm run build:prod 会读取.env.production

npm run build:staging 会读取.env.staging

区别

针对这一问题对不同模式下打包配置文件进行查看：

vue inspect --mode staging > output_staging.js
vue inspect --mode production > output_production.js

对打包配置文件进行对比查看：

staging

output: {
    path: 'F:\\ecidi\\hello-world\\staging',
    filename: 'js/[name].js',
    publicPath: '/uduhs-web-page/',
    chunkFilename: 'js/[name].js'
},

production

output: {
    path: 'F:\\ecidi\\hello-world\\production',
    filename: 'js/[name].[contenthash:8].js',
    publicPath: '/uduhs-web-page/',
    chunkFilename: 'js/[name].[contenthash:8].js'
},

可以发现开发环境中对于生成的文件名称都加了哈希值，对应的目录为：

这种方式下，由于每次生成的hash值都不同，所以当服务器端有资源更新时，由于本地没有缓存，会直接去服务器拿到最新的资源，会很大的改善上述情况。

说到最后

所以，推荐部署的项目采用带hash值的打包方式，打包体积更小，缺点是每次重新发布后都需要重新加载。

考虑还有一种情况，用户正在使用系统过程中服务器更新了，由于之前加载的索引还在，会继续按照该索引去服务器查找已经被覆盖掉的文件，此时仍然会发生异常。

我们目前部署前端代码时，会直接覆盖更新，其实更好的方式是增量更新，仍保留之前部署的文件资源，这样一来不管用户是哪个版本，都可以找到之前版本的资源文件，也可以减少报错的发生。

以上。