釘釘H5微應用、微信H5微應用如何去掉緩存

tips:此方案必須具備webpack配置能力

浏覽器有緩存?

清除緩存就好了,這是大多數前端人員回複的解決方案.

那釘釘H5微應用、微信H5微應用有緩存?

通過釘釘APP強制清緩存,沒錯,可以達到目的.要是遇到不會清緩存的使用者,而且其中偏偏就有你的boss,抓瞎,大腦emo中;考驗語言組織能力的時候到了,忽悠得好升職加薪,忽悠不好關機領錢.

腦中一顫,這個問題不解決,淩晨4點的太陽見定了,頭發也要見頂了.

靈機一動,有緩存,那就讓他緩存,去适應他的緩存就好了,莫急,方案已在來的路上了.

此案例為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微應用解決方案 結束------

看天花闆,看了看表,又看了看天花闆,又看了看表,瞬間淚如泉湧,表顯時間10.31,那一分鐘是對我驕傲的懲罰,肝完收工,明天繼續肝.

------清除釘釘h5微應用、微信h5微應用解決方案 結束------

作者: 半米飛行

詳情: 清除釘釘h5微應用、微信h5微應用解決方案