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

不是標題黨，我們公司的項目確確實實是省下了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官方反饋，問題我反饋了可是沒人理，我能怎么辦？

打個廣告

uni-optimize 是我看了uni源碼之后發現的所有可安全優化的地方，包括壓縮空間和提升打包速度2個方面，
大家感興趣，可以使用下看看效果如何，如果使用還行麻煩給個star~