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的相关源码，自己一个人开发倒是可以，但是团队开发确实不太建议。