vue 单页面应用中遇到的与IE9有关的坑（二）-----IE9对css文件大小和选择器个数的限制

最近做项目，前端用的vue.js。整个项目初版开发完成之后，部署在测试服务器进行一些边边角角的测试与处理，用浏览器打开后发现样式完全跑偏，表示很恐怖呀……那，IE9，你不兼容ES6，如今又是闹哪样？

之后打开F12进行分析，发现，所有的样式都没加载进来啊！原因是IE浏览器对CSS文件大小是有限制的，一种说法是：单个css文件不能超过250kb，另一种说法是单个css文件中选择器个数不能超过4000个。经过查阅资料，得出具体限制是：

1、单个css文件选择器不能超过4095个

2、单个css文件import的css文件不能超过31个

           3、@import嵌套最多支持4级

具体可参考这个链接：IE9浏览器对css文件的限制

为解决css文件过大，需要采取哪些措施呢？

首先，看一下引入的css代码是否必须，删除或者缩减没必要的css代码

然后，各种能CDN链接的样式用CDN 

最后，推荐一个插件css-split-webpack-plugin,使用方法如下：

1、引入

npm install --save-dev  css-split-webpack-plugin

2、在webpack.prod.conf.js里加入如下代码

const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
plugins: [
new CSSSplitWebpackPlugin({
size: 4000,
filename: 'static/css/[name]-[part].[ext]'
}),
]

配置之后，打包后的结果如下所示：

到此，问题完美解决