uni微信小程式優化，幾行程式碼就能省100kb的主包空間？

愛吃巧克力的狗發表於2022-02-02
微信小程式優化行程

不是標題黨，我們公司的專案確確實實是省下了100kb的主包空間，而且還是在沒有犧牲任何的效能和業務的前提下實現的。
但是100kb是根據專案大小，所以你用這個外掛可能省下超過100kb或者更少。

直接上程式碼看效果

一個名為fixMiniCssPlugin的外掛，在vue.config.js使用它

class fixMiniCssPlugin {
    constructor() {}
    apply(compiler) {
        compiler.hooks.thisCompilation.tap('remo', compilation => {
            const {
                mainTemplate
            } = compilation;
            mainTemplate.hooks.localVars.intercept({
                register: (tapInfo) => {
                    if (tapInfo.name === 'mini-css-extract-plugin') {
                        tapInfo.fn = function (params) {};
                    }
                    return tapInfo;
                }
            });
            mainTemplate.hooks.requireEnsure.intercept({
                register: (tapInfo) => {
                    if (tapInfo.name === 'mini-css-extract-plugin') {
                        tapInfo.fn = function (params) {};
                    }
                    return tapInfo;
                }
            });
        });
    }
}
module.exports = fixMiniCssPlugin;

vue.config.js直接引用這個外掛就可以打包看看專案的主包節省了多少kb

var minicss = require('./src/plugins/fix-mini-css-plugin');
module.exports = {
    chainWebpack: config => {
        config
          .plugin('minicss')
          .use(minicss)
      },
}

打包如果確實省下了不少的主包空間，你可能還有一些疑問。
是什麼原理能省下這麼大的空間？
這個外掛安不安全，uni官方都沒有省下的空間，用這個外掛會不會有什麼隱藏的問題？

外掛實現原理

外掛節省的空間來源於dist\build\mp-weixin\common\runtime.js檔案，這個檔案是webpack執行時使用的檔案。

為什麼專案裡的runtime檔案會比uni新建的專案模板裡的大很多？看了之後發現是mini-css-extract-plugin往裡面插入了大量的元件路徑。
不管是主包的還是分包的元件只要寫了樣式程式碼都會加入到runtime，所以專案裡的元件越多，元件路徑越長，runtime越大。

外掛安全性

runtime裡大量的元件路徑到底能不能刪？
我通過了以下幾點來確認是可以刪除的。
1 先在runtime裡使用路徑的地方打斷點，看斷點是否生效，如果生效了那就沒必要寫這個文章了。。。
2 把插入路徑的mini-css-extract-plugin這個外掛的程式碼讀一遍，這個需要對webpack有一定的瞭解，
大概的原理是uni把我們平時寫的同步import利用ast改寫成為非同步import，作用是為了讓頁面和元件不會同時打包成一個檔案，
但是也導致了一些副作用，比如說mini-css-extract-plugin這個外掛有針對非同步css做處理的，所以就把路徑加入到了runtime中。
3 把runtime裡使用路徑的程式碼讀一下，也就是mini-css-extract-plugin外掛如何處理非同步css的，跟處理非同步js是一樣的方法，
網上有很多文章我就不擴充套件了，關鍵字有document.createElement，看到這裡基本就可以確定這段是沒用的了，因為微信小程式裡
是沒用document的，它的載入方式跟網頁不一樣是分包載入的，所以斷點才沒進去。

更好的方案

知道了路徑可以刪除，如何更簡單安全的刪除我做了一些研究，最後得出的結論就是這個外掛方案最好，不感興趣可以不接著看了。
1 簡單粗暴直接利用vue-cli的css.extract配置把mini-css-extract-plugin這個外掛關了就好，
結果是uni利用了vue-cli的外掛強制把mini-css-extract-plugin開啟
2 不信邪，我也寫了個vue-cli的外掛強制把css.extract配置關閉，結果是確實關閉了mini-css-extract-plugin外掛，
但是導致微信的wxss沒有了（後面才知道uni是利用這個外掛生成wxss），看來uni強制開啟的配置是有原因的。。。
3 註釋mini-css-extract-plugin的相關原始碼，自己一個人開發倒是可以，但是團隊開發確實不太建議。
4 給uni官方反饋，問題我反饋了可是沒人理，我能怎麼辦？

相關文章