钉钉H5微应用、微信H5微应用如何去掉缓存

tips:此方案必须具备webpack配置能力

浏览器有缓存?

清除缓存就好了,这是大多数前端人员回复的解决方案.

那钉钉H5微应用、微信H5微应用有缓存?

通过钉钉APP强制清缓存,没错,可以达到目的.要是遇到不会清缓存的用户,而且其中偏偏就有你的boss,抓瞎,大脑emo中;考验语言组织能力的时候到了,忽悠得好升职加薪,忽悠不好关机领钱.

脑中一颤,这个问题不解决,凌晨4点的太阳见定了,头发也要见顶了.

img

灵机一动,有缓存,那就让他缓存,去适应他的缓存就好了,莫急,方案已在来的路上了.

此案例为spa webpack打包应用,其他技术栈可用该思想进行尝试,此方案不是终极解决方案,只能算我尝试后的最优解决方案,只能降低触发缓存的概率,并不能完全根除.

------清除钉钉h5微应用、微信h5微应用解决方案 开始------

只要被缓存的文件没有更换,或者更换的文件并没有被缓存,那微应用打开是不是就不会触发缓存问题;

道理是这么个道理,咱说干就干,已经晚上10点了,一刻也不能耽误;

通过扒拉webpack4文档,它有3种打包方案hash、chunkHash、contentHash,contentHash打包方式恰巧与咱们的灵感重合(低于4版本可用chunkHash);心中一阵窃喜,我已经开始飘了,感觉10:30能回家;webpack出包设置方式如下配置:

output: {
  chunkFilename: `js/[id].[${process.env.NODE_ENV === 'production' 'contentHash' : 'hash'}].js`, // development不支持contentHash、chunkHash
    filename: `js/[name].[${process.env.NODE_ENV === 'production' 'contentHash' : 'hash'}].js`, // development不支持contentHash、chunkHash
    publicPath: '/', // 解决多路由错乱
    },

怎么解决别一下子把所有文件全部缓存呢

再去扒拉webpack4文档,他有异步加载以及分包策略,这样它就不能全部缓存我的文件了,我突然间又行了,webpack分包配置如下:

optimization: {
  // 将多入口的webpack运行时文件打包成一个 runtime文件
  runtimeChunk: 'single',
    moduleIds: 'hashed',
    splitChunks: {
    chunks: 'all',
      // 拆分代码规则（符合即单独拆分到一个chunk中）
      maxInitialRequests: 4, // 在初始化加载时，请求数量大于4
      automaticNameDelimiter: '-',
      name: true, // 代码块的名字，设置为true则表示根据模块和缓存组秘钥自动生成, 实现固化 chunkId，保持缓存的能力
      /* 缓存组，用于继续细分代码。
        缓存组默认将node_modules中的模块拆分带一个叫做vendors的代码块, 将最少重复引用两次的模块放入default中。
        或者自定义将符合规则的模块单独拆分进一个chunk中。*/
      cacheGroups: {
      default: false, // 禁用默认规则
        vendors: false, // 禁用默认规则
        vendor: {
        name: 'vendor', // 使用 vendor 入口作为公共部分
          chunks: 'initial',
          test: /[\/]node_modules[\/]/,
          enforce: true,
          priority: -10,
          },
      polyfill: {
        chunks: 'initial',
          test: 'polyfill',
          name: 'polyfill',
          },
          // 对异步组件进行抽取
          'async-vendor': {
          name: 'async-vendor',
            chunks: 'async',
            test: (module) => {
            // 缓存组的规则，表示符合条件的的放入当前缓存组
            if (/[\/]node_modules[\/](echarts|zrender)/.test(module.context)) {
              return false;
            }
            return /[\/]node_modules[\/]/.test(module.context);
          },
            },
            'async-biz': {
            name: 'async-biz',
              chunks: 'async',
              minChunks: 2, // 被引用次数大于2时进行拆分
              },
              // css文件单独打包进一个文件中
              styles: {
              name: 'styles',
                test: /\.(less|css)$/,
                chunks: 'async',
                enforce: true,
                },
                },
                },
          },

继续肝,更改完webpack4配置反复的打包测试、对打包文件进行对比,发到钉钉,手指微微颤动的点击了一下界面,竟然没有触发缓存,连续试了多次,居然都没有触发缓存;

我看了看天花板,看了看表,又看了看天花板,又看了看表,瞬间泪如泉涌,表显时间10.31,那一分钟是对我骄傲的惩罚,肝完收工,明天继续肝.

------清除钉钉h5微应用、微信h5微应用解决方案 结束------

作者: 半米飞行

来源: [钉钉H5微应用、微信H5微应用如何去掉缓存](钉钉H5微应用、微信H5微应用如何去掉缓存 - 掘金 (juejin.cn))