ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端项目打包部署后，怎样制止让用户欺压去清除欣赏器缓存 [打印本页]
作者: 九天猎人    时间: 2024-12-22 16:38
标题: 前端项目打包部署后，怎样制止让用户欺压去清除欣赏器缓存
欣赏器缓存机制

欣赏器缓存是Web欣赏中一个重要的性能优化机制，它答应欣赏器将从服务器获取的资源（如HTML文件、图片、CSS样式表、JavaScript脚本等）存储在本地的临时存储区域。如许，在用户再次访问同一个网站或重复加载相同资源时，欣赏器可以直接从本地缓存中读取这些资源，而不需要重新向服务器发送哀求，从而大大加快了页面的加载速度，减少了网络流量斲丧，并提拔了用户体验。
解决方案

1、使用Cache-Control和Pragma头部，克制欣赏器缓存。
  1. <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  2. <meta http-equiv="Pragma" content="no-cache">
复制代码
上述方法在大多数欣赏器中都适用。但假如用户设置了欺压缓存或某些特殊的欣赏器行为，欣赏器仍会缓存内容。
更严格的控制需要服务器端配合，在服务器配置中设置相应的HTTP响应头，如在Apache、Nginx等服务器的配置文件中设置Cache-Control和Expires头部。
2、在HTML的head标签中，添加资源版本号。当引入 CSS 和 JavaScript 文件时，让每次文件内容有所改动，从而制止欣赏器缓存问题。
  1. <link rel="stylesheet" href="main.css?v=1.0">
  2. <script src="main.js?v=1.0"></script>
复制代码
3、假如是使用Webpack构建打包，在配置文件中使用其文件命名特性来为输出的文件添加hash。
  1. // mini-css-extract-plugin 是一个 Webpack 插件，用于将 CSS 从 JavaScript bundle 中分离出来，生成独立的 CSS 文件。
  2. // 这样做有利于提高网页加载速度，因为 CSS 可以被浏览器并行下载，而且还能利用浏览器对静态资源的缓存机制。
  3. // 此外，它也支持 CSS Modules 和热模块替换（HMR）。
  4. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  6. module.exports = {
  7.   // ...
  8.   output: {
  9.     path: path.resolve(__dirname, 'dist'),
  10.     filename: '[name].[chunkhash].js', // 使用chunkhash为chunk生成哈希文件名
  11.     chunkFilename: '[name].[chunkhash].chunk.js',
  12.   },
  13.   module: {
  14.     rules: [
  15.       {
  16.         test: /.css$/,
  17.         use: [
  18.           // 将MiniCssExtractPlugin.loader放在第一位，以将CSS提取到单独的文件中
  19.           MiniCssExtractPlugin.loader,
  20.           'css-loader',
  21.         ],
  22.       },
  23.       // 如果你也在处理其他样式文件，如less或sass，也应相应配置
  24.     ],
  25.   },
  26.   plugins: [
  27.     // 在plugins部分配置MiniCssExtractPlugin
  28.     new MiniCssExtractPlugin({
  29.       filename: '[name].[contenthash].css',
  30.       chunkFilename: '[id].[contenthash].chunk.css',
  31.     }),
  32.   ],
  33.   // ...
  34. };
复制代码
若为vue项目，通过vue.config.js配置
  1. const path = require('path')
  2. const webpack = require('webpack')
  4. module.exports = {
  5.   publicPath: './',
  6.   // 打包的时候使用hash值
  7.   filenameHashing: true,
  9.   // 输出文件目录
  10.   outputDir: 'dist',
  11.   
  12.   configureWebpack: {
  13.     // 打包编译后的js文件
  14.     output: {
  15.       filename: `js/[name].[chunkhash].js`,
  16.       chunkFilename: `js/[name].[chunkhash].chunk.js`,
  17.     }
  18.   },
  20.   // 打包后css文件
  21.   css: {
  22.     extract: {
  23.       filename: `css/[name].[contenthash].css`,
  24.       chunkFilename: `css/[id].[contenthash].chunk.css`,
  25.     }
  26.   }
  27. }
复制代码
如许配置之后，每次打包发布后就不需要手动清除欣赏器缓存了。

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



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4