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

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

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

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

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

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

給個建議最好還是不要貼著邊飛行

優(yōu)化手段

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

2.刪除一些非要的字體圖標(biāo)庫，因為公司有專門的字體庫，然后前面的人就把所有的圖標(biāo)下載下來，但用到的僅僅不到三分之一。光這個就減少幾十kb
3. 刪除一些無關(guān)的樣式代碼，清除無關(guān)的代碼，這個對于長年日積月累的代碼來說 還是有很多廢代碼，我整體過了一遍減少了幾十kb
4. 主包很大的情況，可以考慮分包處理
5. 如果分包之后，主包還是很大的話，不要把分包分的太多了，因為分包中只要有兩個分包引用了同一個插件 就會打包到主包中
6.把那些主包和很多分包中都用到的插件進(jìn)行單獨拆分出來

 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這個時間插件 我們就可以更新成dayjs進(jìn)行替換，因為dayjs體積小了很多
8.上傳的時候勾選樣式自動補(bǔ)全，這個好像沒啥用但是給點心理安慰吧哈哈

總結(jié)： 代碼體積過大，本身上 很多時候就是因為我們使用的插件可能有點多，注意不要過多的使用插件哈 ，因為代碼本身不是很大的

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