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/index.css’;
import ‘mint-ui/lib/style.css’
import “swiper/dist/css/swiper.min.css”;

尝试之后，失败的方案：
const cssCDN = [{
default: ‘https://cdn.bootcss.com/element-ui/2.10.0/theme-chalk/index.css3’,
backup: ‘https://cdn.jsdelivr.net/npm/element-ui@2.10.0/lib/theme-chalk/index.css’
}, {
default: ‘https://cdn.bootcss.com/mint-ui/2.2.13/style.min.css’,
backup: ‘https://cdn.jsdelivr.net/npm/mint-ui@2.2.13/lib/style.min.css’
}];

/**

• CSS加载失败，就加载备份的CSS
• 元素的onerror方法，在微信模拟器不执行，
• 需要动态创建的link元素才可以。
• @param data
  */
  function cssLoad(data) {
  let link;
  for (let index in data) {
  link = document.createElement(‘link’);
  link.rel = ‘stylesheet’;
  link.href = data[index].default;
  console.log(’“onload” in node =’ + (“onload” in link))
  link.onload = function() {
  //css加载成功
  };
  link.onerror = function() {
  //css加载失败，加载备份的CSS
  let css = document.createElement(‘link’);
  css.rel = ‘stylesheet’;
  css.href = data[index].backup;
  document.head.appendChild(css);
  };
  document.head.appendChild(link);
  }

let timer = setInterval(function () {
  let sheet;
  let rules;
  let cssLength;
  let cssNum = 0;
  let length = document.styleSheets.length;
  for (let i = 0; i < length; i++) {
	sheet = document.styleSheets[i];
	//链接不存在，跳过
	if(!sheet.href) {
	  continue;
	}
	console.log(sheet)
	if(sheet) {
	  console.log('sheet ================true')
	}
	try {
	  //严重：对于跨域的CSS文件，在谷歌浏览器，无法获取cssRules，只能用其它办法
	  //已放弃该方式
	  rules = sheet.rules ? sheet.rules : sheet.cssRules;
	  cssLength = rules.length;
	} catch (e) {
	  //如果CSS加载失败，例如链接打不开，会抛出异常，所以，需要捕获
	  cssLength = 0;
	}
	//如果CSS加载成功，就记录下来
	if (cssLength > 0) {
	  console.log('cssLength > 0 ================')
	  for (let index in data) {
		if (data[index].default === sheet.href || data[index].backup === sheet.href) {
		  cssNum ++;
		  console.log('index =' + index)
		  console.log('cssNum =' + cssNum)
		  break;
		}
	  }
	}
  }

  if(cssNum == data.length) {
	clearInterval(timer);
  }

}, 10000);

}

cssLoad(cssCDN);