微信小程序web-view缓存问题前端解决方案

站长

2023年09月29日 00:50 · 阅读数 12

背景

原因分析

借用老哥的分析，造成缓存的由于以下两点：

入口文件index.html被缓存
index.html引入的静态资源被缓存

原因知道了，前台怎么解决呢，index.html加时间戳也不管用，那只能在第二点下功夫了呀。index.html加时间戳不管用，但我知道资源引入加时间戳是有用的！！！有了，我知道了，开干。

解决方案

本方案的核心就是资源引入加时间戳是不会用缓存的。正常来说，vue工程打包后index.html如下：

<!doctype html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue2-demo</title>
    <script defer="defer" src="js/chunk-vendors.9d94de0d.js"></script>
    <script defer="defer" src="js/app.54cbd6bd.js"></script>
    <link href="css/app.96c5a196.css" rel="stylesheet">
</head>

<body><noscript><strong>We're sorry but vue2-demo doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong></noscript>
    <div id="app"></div>
</body>

</html>

我们来做个改造，加上一个带时间戳的js引入，改后如下：

<!doctype html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue2-demo</title>
    <script defer="defer" src="js/chunk-vendors.9d94de0d.js"></script>
    <script defer="defer" src="js/app.54cbd6bd.js"></script>
    <link href="css/app.96c5a196.css" rel="stylesheet">
    <script>
        const _insertScript_ = document.createElement('script');
        _insertScript_.src = 'resource-paths.js' + '?t=' + new Date().getTime();
        document.head.appendChild(_insertScript_);
    </script>
</head>

<body><noscript><strong>We're sorry but vue2-demo doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong></noscript>
    <div id="app"></div>
</body>

</html>

这个时候每次加载resource-paths.js这个js文件都是最新的。那这解决办法不就来了嘛。我把打包生成的chunk-vendors.9d94de0d.js、app.54cbd6bd.js、app.96c5a196.css都丢到resource-paths.js里面去，那不是每次都是最新的资源了吗？这样resource-paths.js就如下：

const script0 = document.createElement('script'); 
script0.defer = true; 
script0.src = 'js/chunk-vendors.9d94de0d.js'; 
document.head.appendChild(script0);
const script1 = document.createElement('script'); 
script1.defer = true; 
script1.src = 'js/app.54cbd6bd.js'; 
document.head.appendChild(script1);
const link0 = document.createElement('link'); 
link0.href = 'css/app.96c5a196.css'; 
link0.rel = 'stylesheet'; 
document.head.appendChild(link0);

index.html如下：

<!doctype html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue2-demo</title>
    <script>
        const _insertScript_ = document.createElement('script');
        _insertScript_.src = 'resource-paths.js' + '?t=' + new Date().getTime();
        document.head.appendChild(_insertScript_);
    </script>
</head>

<body><noscript><strong>We're sorry but vue2-demo doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong></noscript>
    <div id="app"></div>
</body>

</html>

这样的话，讲道理，每次都会拉最新的resource-paths.js，然后resource-paths.js里面都每次最新打包的资源，那这样不就会每次都去拉最新资源了吗？实践是检验真理的唯一标准，测试搞起来（x我测过了，可行！）。

好了，解决了，每次打包完把打包后的资源丢到resource-paths.js里就行了。

不行啊，那不得每次手动搞，得整个插件。

插件

上述思路已经封装成插件发布到npm上，使用方式如下：

安装

npm i no-cache-plugin -s

使用在vue.config.js中使用

const { defineConfig } = require('@vue/cli-service');
const NoCachePlugin = require('no-cache-plugin');

module.exports = defineConfig({
  ...
  configureWebpack: (config) => {
    // 生产环境配置
    if (process.env.NODE_ENV === "production") {
      config.plugins.push(new NoCachePlugin());
    }
  },
});

源码

GitHub地址：noCachePlugin.js 有没有老哥给我献上第一个星星（x第一次）

最后，下班！！！中秋国庆快乐！！！！！