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官方反馈,问题我反馈了可是没人理,我能怎么办?

上一篇:DropDMG for Mac(dmg打包软件)


下一篇:Kubernetes – Google分布式容器技术初体验