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

前言

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

一、什么是浏览器缓存

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

二、展示效果

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

三、vue.config.js 代码

1. 压缩打包文件；
2. js 文件和 css 文件增加时间戳；

const CompressionPlugin = require("compression-webpack-plugin");
const version = dateFormat(new Date(),"yyyyMMddHHmmss");

// 本地服务接口地址
let target = "http://192.168.1.249", // 代理服务
module.exports = {
  //开发模式反向代理配置，生产模式请使用Nginx部署并配置反向代理
  devServer: {
    port: 2890,
    proxy: {
      "/api": {
        target,
        // 远程演示服务地址,可用于直接启动项目
        ws: true, // 代理 websockets，配置这个参数
        pathRewrite: {
          "^/api": "",
        },
      },
      "/blade-wwnetservice": { // 第三方接口调用接口
        target: "http://192.168.1.249:1888"
      },
    },
  },
  //路径前缀
  publicPath: "./",
  outputDir: "dist",
  assetsDir: "static",
  lintOnSave: false, // 是否开启eslint保存检测
  productionSourceMap: false, // 不会生成.map文件减小体积
  transpileDependencies: [
    "axios",
    "vuex",
    "vue-router",
    "element-ui",
    "compression-webpack-plugin",
    "babel-polyfill",
    "classlist-polyfill",
    "vue",
  ],
  chainWebpack: config => {
    //忽略的打包文件
    config.externals({
      "vue": "Vue",
      "vue-router": "VueRouter",
      "vuex": "Vuex",
      "axios": "axios",
      "element-ui": "ELEMENT"
    });
    const entry = config.entry("app");
    entry.add("babel-polyfill").end(); //es6=>es5
    entry.add("classlist-polyfill").end();
    // entry.add('@/mock').end();
    // 开启js、css压缩
    if (process.env.NODE_ENV === "production") {
         config.plugin("compressionPlugin").use(
           new CompressionPlugin({
             test: /\.js$|\.css/, // 匹配文件名
             threshold: 10240, // 对超过10k的数据压缩
             deleteOriginalAssets: true // 不删除源文件
           })
         );
    }
  },
  configureWebpack: config => {
    // 生产环境取消 console.log
    if (process.env.NODE_ENV === "production") {
      config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
      // 为了浏览器不缓存静态资源，增加时间戳;
      config.output.filename= 'static/js/[name].'+version+'.js';
      config.output.chunkFilename= 'static/js/[name].'+version+'.js';
    } else {
      config.devtool = "source-map";
    }
  },
  css: {
    extract: { // 打包后css文件名称添加时间戳
      filename: `static/css/[name].${version}.css`,
      chunkFilename: `static/css/chunk.[id].${version}.css`,
      ignoreOrder: true, // 编译时忽略排序
    }
  },
};

function dateFormat(date, format) {
  format = format || 'yyyy-MM-dd HH:mm:ss';
  if (date !== 'Invalid Date') {
    let o = {
      "M+": date.getMonth() + 1, //month
      "d+": date.getDate(), //day
      "H+": date.getHours(), //hour
      "m+": date.getMinutes(), //minute
      "s+": date.getSeconds(), //second
      "q+": Math.floor((date.getMonth() + 3) / 3), //quarter
      "S": date.getMilliseconds() //millisecond
    }
    if (/(y+)/.test(format)) format = format.replace(RegExp.$1,(date.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (let k in o){
      if (new RegExp("(" + k + ")").test(format)){
        format = format.replace(RegExp.$1,RegExp.$1.length === 1 ? o[k] :("00" + o[k]).substr(("" + o[k]).length));
      }
    }
    return format;
  }
  return '';
}

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

所以需要将这段代码注释或者删除。

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

五、感谢

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