不是标题党,我们公司的项目确确实实是省下了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官方反馈,问题我反馈了可是没人理,我能怎么办?