文字描述可能有點(diǎn)長。 感興趣的童鞋 請耐心看下 都是經(jīng)驗(yàn)總結(jié)哈

由于公司要在小程序上面加上一個(gè)聊天的功能 ，選來選去 最后選擇了 騰訊的im

由于需要用到的一些功能可能比較新吧。所以優(yōu)選選擇了 最新的sdk
當(dāng)時(shí)代碼體積是 1.7M，但是沒想到 就這個(gè)sdk 就有三四百kb 別說再加上聊天的業(yè)務(wù)代碼了。

然后就開始了 長久的優(yōu)化縮小 代碼體積包的經(jīng)歷

下面就是 意義羅列出來 當(dāng)時(shí)那些減少了體積，最后 保證了不影響現(xiàn)有業(yè)務(wù)的情況下 把小程序上了。當(dāng)然空間也只剩下 50kb左右的空間 就溢出。很危險(xiǎn) 。

這里注意點(diǎn)： 如果你的本地代碼是 1.82M 但是上傳的時(shí)候經(jīng)過代碼的壓縮和樣式體積的壓縮，你的代碼可能還是會超過2M 不要奇怪哈

給個(gè)建議最好還是不要貼著邊飛行

優(yōu)化手段

1.非必要不要吧圖片的東西放到項(xiàng)目里面，除非是一些很小的圖標(biāo)，我的項(xiàng)目中圖片的總共才二三十 kb 吧, 放靜態(tài)服務(wù)器中

2.刪除一些非要的字體圖標(biāo)庫，因?yàn)楣居袑ｉT的字體庫，然后前面的人就把所有的圖標(biāo)下載下來，但用到的僅僅不到三分之一。光這個(gè)就減少幾十kb
3. 刪除一些無關(guān)的樣式代碼，清除無關(guān)的代碼，這個(gè)對于長年日積月累的代碼來說 還是有很多廢代碼，我整體過了一遍減少了幾十kb
4. 主包很大的情況，可以考慮分包處理
5. 如果分包之后，主包還是很大的話，不要把分包分的太多了，因?yàn)榉职兄灰袃蓚€(gè)分包引用了同一個(gè)插件 就會打包到主包中
6.把那些主包和很多分包中都用到的插件進(jìn)行單獨(dú)拆分出來

 mini: {
    webpackChain (chain, webpack) {
      ...
      chain.merge({
        optimization: {
          splitChunks: {
            cacheGroups: {
              moment: {
                name: 'moment',
                priority: 1000,
                test (module) {
                  return /node_modules[\\/]moment/.test(module.context)
                }
              }
            }
          }
        }
      })
    },
    
    commonChunks: ['runtime', 'vendors', 'taro', 'common', 'moment'],
   
  },

7.再其次就是更新一些插件，比如moment這個(gè)時(shí)間插件 我們就可以更新成dayjs進(jìn)行替換，因?yàn)閐ayjs體積小了很多
8.上傳的時(shí)候勾選樣式自動補(bǔ)全，這個(gè)好像沒啥用但是給點(diǎn)心理安慰吧哈哈

總結(jié)： 代碼體積過大，本身上 很多時(shí)候就是因?yàn)槲覀兪褂玫牟寮赡苡悬c(diǎn)多，注意不要過多的使用插件哈 ，因?yàn)榇a本身不是很大的

以上就是這個(gè)過程中經(jīng)驗(yàn)總結(jié) 關(guān)注我 持續(xù)更新前端知識。