vue2 打包时增长时间戳防止浏览器缓存，打包后文件举行 js、css 压缩 ...

---

前言

vue 开发过程中，项目前端代码需要更新，更新后由于浏览器缓存导致代码没有及时更新所产生错误，所以在打包时增长时间戳防止浏览器缓存。尚有另一个利益是增长时间戳可以看到是什么时间打包的代码，防止运维偷懒 没更新甩锅。

---

一、什么是浏览器缓存

   浏览器缓存 是指浏览器将网站资源（如图片、CSS、JS等文件）保存在本地，以便在用户再次访问同一网站时可以更快地加载页面。浏览器缓存可以分为强缓存和协商缓存两种范例。强缓存是浏览器直接从本地缓存中读取资源，而不向服务器发送哀求，从而加快页面加载速率。协商缓存则是在强缓存失效时浏览器向服务器发起哀求，服务器会验证资源的最新状态，并返回给浏览器是否可以使用缓存的响应。
  二、展示结果

打开 F12 进入 Sources 打开项目中的 static 文件中的 css 大概 js 就可以看到 每个文件后面都有一个时间戳 如： app.20240912143942.js 就是 2024年9月12日 打包的代码。

三、vue.config.js 代码

• 压缩打包文件；
  
• js 文件和 css 文件增长时间戳；
  

2. const CompressionPlugin = require("compression-webpack-plugin");
3. const version = dateFormat(new Date(),"yyyyMMddHHmmss");
5. // 本地服务接口地址
6. let target = "http://192.168.1.249", // 代理服务
7. module.exports = {
8.   //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
9.   devServer: {
10.     port: 2890,
11.     proxy: {
12.       "/api": {
13.         target,
14.         // 远程演示服务地址,可用于直接启动项目
15.         ws: true, // 代理 websockets，配置这个参数
16.         pathRewrite: {
17.           "^/api": "",
18.         },
19.       },
20.       "/blade-wwnetservice": { // 第三方接口调用接口
21.         target: "http://192.168.1.249:1888"
22.       },
23.     },
24.   },
25.   //路径前缀
26.   publicPath: "./",
27.   outputDir: "dist",
28.   assetsDir: "static",
29.   lintOnSave: false, // 是否开启eslint保存检测
30.   productionSourceMap: false, // 不会生成.map文件减小体积
31.   transpileDependencies: [
32.     "axios",
33.     "vuex",
34.     "vue-router",
35.     "element-ui",
36.     "compression-webpack-plugin",
37.     "babel-polyfill",
38.     "classlist-polyfill",
39.     "vue",
40.   ],
41.   chainWebpack: config => {
42.     //忽略的打包文件
43.     config.externals({
44.       "vue": "Vue",
45.       "vue-router": "VueRouter",
46.       "vuex": "Vuex",
47.       "axios": "axios",
48.       "element-ui": "ELEMENT"
49.     });
50.     const entry = config.entry("app");
51.     entry.add("babel-polyfill").end(); //es6=>es5
52.     entry.add("classlist-polyfill").end();
53.     // entry.add('@/mock').end();
54.     // 开启js、css压缩
55.     if (process.env.NODE_ENV === "production") {
56.          config.plugin("compressionPlugin").use(
57.            new CompressionPlugin({
58.              test: /\.js$|\.css/, // 匹配文件名
59.              threshold: 10240, // 对超过10k的数据压缩
60.              deleteOriginalAssets: true // 不删除源文件
61.            })
62.          );
63.     }
64.   },
65.   configureWebpack: config => {
66.     // 生产环境取消 console.log
67.     if (process.env.NODE_ENV === "production") {
68.       config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
69.       // 为了浏览器不缓存静态资源，增加时间戳;
70.       config.output.filename= 'static/js/[name].'+version+'.js';
71.       config.output.chunkFilename= 'static/js/[name].'+version+'.js';
72.     } else {
73.       config.devtool = "source-map";
74.     }
75.   },
76.   css: {
77.     extract: { // 打包后css文件名称添加时间戳
78.       filename: `static/css/[name].${version}.css`,
79.       chunkFilename: `static/css/chunk.[id].${version}.css`,
80.       ignoreOrder: true, // 编译时忽略排序
81.     }
82.   },
83. };
85. function dateFormat(date, format) {
86.   format = format || 'yyyy-MM-dd HH:mm:ss';
87.   if (date !== 'Invalid Date') {
88.     let o = {
89.       "M+": date.getMonth() + 1, //month
90.       "d+": date.getDate(), //day
91.       "H+": date.getHours(), //hour
92.       "m+": date.getMinutes(), //minute
93.       "s+": date.getSeconds(), //second
94.       "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
95.       "S": date.getMilliseconds() //millisecond
96.     }
97.     if (/(y+)/.test(format)) format = format.replace(RegExp.$1,(date.getFullYear() + "").substr(4 - RegExp.$1.length));
98.     for (let k in o){
99.       if (new RegExp("(" + k + ")").test(format)){
100.         format = format.replace(RegExp.$1,RegExp.$1.length === 1 ? o[k] :("00" + o[k]).substr(("" + o[k]).length));
101.       }
102.     }
103.     return format;
104.   }
105.   return '';
106. }

复制代码

四、代码压缩部分服务器不支持

所以需要将这段代码表明大概删除。

1. // 开启js、css压缩
2. if (process.env.NODE_ENV === "production") {
3.       config.plugin("compressionPlugin").use(
4.            new CompressionPlugin({
5.                 test: /\.js$|\.css/, // 匹配文件名
6.                 threshold: 10240, // 对超过10k的数据压缩
7.                 deleteOriginalAssets: true // 不删除源文件
8.            })
9.       );
10. }

复制代码

五、感谢

如果觉得有效欢迎点赞关注收藏。
有问题私信我！！~~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。