Solo  当前访客:0 开始使用

ie8以下单个css大小限制


问题描述

webpack1打包的css,使用了extract-text-webpack-plugin插件, 抽取出的css,被合并到了一个文件内。
由于业务发展,文件越来越大。 在现代浏览器中没有问题, 但是在ie8下出现,新增的css无法生效的问题

问题定位

  1. 首先确认css无误
  2. 定位出是在低版本ie下出现
  3. 通过二分法调整失效的css在文件中的位置,进行调试
  4. 发现某一个位置下,css是生效的
  5. 确认该位置附近css无误
  6. 注释一部分css, 发现原先不生效的css,生效了
  7. 定位问题是由于超出未解析的原因
  8. gg查找,发现是ie8以下有单css文件大小限制的问题(有人认为是选择器限制,有人认为是文件大小限制, 详情)

解决方案

对extract-text-webpack-plugin做一些调整, 支持传入文件大小限制,进行css切分

npm install -S extract-text-limit-webpack-plugin

使用方法

// 按 110大小分割, 分割后的文件会分布在110k附近, 不会严格按110k定义每个文件
new ExtractTextPlugin (utils.assetsPath ('css/[name].[contenthash].css'), {allChunks: true}, 110 * 1024),


标题:ie8以下单个css大小限制
作者:hugh0524
地址:https://newblog.uproject.cn/articles/2019/12/24/1577161558960.html

, , , 0 25