2023年6月21日发(作者：)
vue项⽬性能优化5，优化：CSS⽂件过⼤基于webpack 3、vue 2和vue-cli 2的性能优化。⼀般CSS⽂件不会过⼤，⽽且也没什么可优化的，毕竟CSS只是描述样式，没有逻辑，所以不会像JS出现重复引⽤的问题。经过把css改成CDN加速之后，变⼩了⼀点，最后⽂件还是很⼤，打开⽂件查看，发现是图⽚的base64字符串被打包到css⽂件中了。不能继续优化了。解决图⽚被转换成base64的问题，可以把图⽚上传到⽂件服务器，在项⽬⾥直接引⽤图⽚的链接，可以有效减⼩css⽂件的⼤⼩。1、CDN加速2、搜索整个项⽬，删除或者注释掉import ‘element-ui/lib/theme-chalk/’;import ‘mint-ui/lib/’import “swiper/dist/css/”;/**CSS加载失败，就加载备份的CSS元素的onerror⽅法，在微信模拟器不执⾏，需要动态创建的link元素才可以。@param data*/function cssLoad(data) {let link;for (let index in data) {link = Element(‘link’); = ‘stylesheet’; = data[index].default;(’“onload” in node =’ + (“onload” in link)) = function() {//css加载成功};r = function() {//css加载失败，加载备份的CSSlet css = Element(‘link’); = ‘stylesheet’; = data[index].backup;Child(css);};Child(link);}let timer = setInterval(function () { let sheet; let rules; let cssLength; let cssNum = 0; let length = ; for (let i = 0; i < length; i++) { sheet = heets[i]; //链接不存在，跳过 if(!) { continue; } (sheet) if(sheet) { ('sheet ================true') } try { //严重：对于跨域的CSS⽂件，在⾕歌浏览器，⽆法获取cssRules，只能⽤其它办法 //已放弃该⽅式 rules = ? : es; cssLength = ; } catch (e) { //如果CSS加载失败，例如链接打不开，会抛出异常，所以，需要捕获 cssLength = 0; } //如果CSS加载成功，就记录下来 if (cssLength > 0) { ('cssLength > 0 ================') for (let index in data) { if (data[index].default === || data[index].backup === ) { cssNum ++; ('index =' + index) ('cssNum =' + cssNum) break; } } } } if(cssNum == ) { clearInterval(timer); }}, 10000);}cssLoad(cssCDN);
2023年6月21日发(作者：)
vue项⽬性能优化5，优化：CSS⽂件过⼤基于webpack 3、vue 2和vue-cli 2的性能优化。⼀般CSS⽂件不会过⼤，⽽且也没什么可优化的，毕竟CSS只是描述样式，没有逻辑，所以不会像JS出现重复引⽤的问题。经过把css改成CDN加速之后，变⼩了⼀点，最后⽂件还是很⼤，打开⽂件查看，发现是图⽚的base64字符串被打包到css⽂件中了。不能继续优化了。解决图⽚被转换成base64的问题，可以把图⽚上传到⽂件服务器，在项⽬⾥直接引⽤图⽚的链接，可以有效减⼩css⽂件的⼤⼩。1、CDN加速2、搜索整个项⽬，删除或者注释掉import ‘element-ui/lib/theme-chalk/’;import ‘mint-ui/lib/’import “swiper/dist/css/”;/**CSS加载失败，就加载备份的CSS元素的onerror⽅法，在微信模拟器不执⾏，需要动态创建的link元素才可以。@param data*/function cssLoad(data) {let link;for (let index in data) {link = Element(‘link’); = ‘stylesheet’; = data[index].default;(’“onload” in node =’ + (“onload” in link)) = function() {//css加载成功};r = function() {//css加载失败，加载备份的CSSlet css = Element(‘link’); = ‘stylesheet’; = data[index].backup;Child(css);};Child(link);}let timer = setInterval(function () { let sheet; let rules; let cssLength; let cssNum = 0; let length = ; for (let i = 0; i < length; i++) { sheet = heets[i]; //链接不存在，跳过 if(!) { continue; } (sheet) if(sheet) { ('sheet ================true') } try { //严重：对于跨域的CSS⽂件，在⾕歌浏览器，⽆法获取cssRules，只能⽤其它办法 //已放弃该⽅式 rules = ? : es; cssLength = ; } catch (e) { //如果CSS加载失败，例如链接打不开，会抛出异常，所以，需要捕获 cssLength = 0; } //如果CSS加载成功，就记录下来 if (cssLength > 0) { ('cssLength > 0 ================') for (let index in data) { if (data[index].default === || data[index].backup === ) { cssNum ++; ('index =' + index) ('cssNum =' + cssNum) break; } } } } if(cssNum == ) { clearInterval(timer); }}, 10000);}cssLoad(cssCDN);
发布评论