uni微信小程序优化，几行代码就能省100kb的主包空间？

本文主要是介绍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微信小程序优化，几行代码就能省100kb的主包空间？的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！