0
点赞
收藏
分享

微信扫一扫

webpack项目和vue项目发布,浏览器存在缓存

芭芭蘑菇 2023-07-18 阅读 70

项目是webpack搭建的每次发步到线上,经常需要手动清楚浏览器缓存才能有效果。vue项目设置在最下面

项目打包的js(css也是一致)名称都采用哈希值
在这里插入图片描述
问题:哈希值在有些情况下打包会不变,导致浏览器使用自己缓存的资源

  • 1.js处理 每个项目的打包逻辑都不一样,根据package.json中的打包指令找到执行的文件修改 static是本地静态资源的文件夹
let time = new Date().getTime()
output: {
    path: config.build.assetsRoot,
    filename: `static/js/[name].[chunkhash:8].${time}.js`,
    chunkFilename:`static/js/[name].[chunkhash:8].${time}.js`
  },

在这里插入图片描述

  • 2.css处理 可以使用css分离插件 MiniCssExtractPlugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins:[
new MiniCssExtractPlugin({
      filename: `static/css/[name].[contenthash:8].${time}.css`,
      chunkFilename:  `static/css/[name].[contenthash:8].${time}.css`,
    }),
]

打包结果

在这里插入图片描述

测试
打开线上环境 发现资源是缓存的 从network在这里插入图片描述

然后我们发布下
在这里插入图片描述

vue项目处理其实一样,改打包输出的名字
vue.config.js

time 时间戳
  
module.exports = {
	configureWebpack: {
    output: {
      filename: `js/[name].${time}.js`,
      chunkFilename: `js/[name].${time}.js`,
     
    },
    
  },

 chainWebpack: config => {
		config.plugins.delete("prefetch");
    config.plugin("extract-css").tap((args) => [
      {
        filename: `css/[name].${time}.css`,
        chunkFilename: `css/[name].${time}.css`,
      },
    ]);

	}


}

举报

相关推荐

0 条评论