webpack的css压缩不兼容IOS8问题探索

webpack使用postcss的autoprefixer插件,并在压缩css时使用了cssnano,处理不当的情况下会导致压缩css后,部分兼容前缀(比如-webkit-)被删除的问题。

postcss的autoprefixer配置如下:

autoprefixer({
              browsers: ['> 1%', 'iOS >= 7',"ie >= 7", 'Android >= 2.4']
          })

css压缩的配置如下:

//压缩css代码
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css\.*(?!.*map)/g,  //注意不要写成 /\.css$/g
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { 
                discardComments: {removeAll: true },
                // 避免 cssnano 重新计算 z-index
                 safe: true
            },
            canPrint: true
        })

通过查阅资料发现,如果你使用的是webpack1.x版本,UglifyJsPlugin这个插件开启了minimize,导致css-loader也开启了压缩,然后css-loader会使用cssnano进行压缩,而cssnano会使用到autoprefixer进行无关前缀的清理。所以可以通过给css-loader添加-autoprefixer参数来告诉css-loader关闭掉autoprefixer这个功能,不要强制删除某些你觉得不重要的前缀。

{test: /\.less$/,   loader: 'style-loader!css-loader?minimize&-autoprefixer!postcss-loader!less-loader'},

而上述原因已经在webpack2.x修复,webpack2的UglifyJsPlugin插件去掉了强制开启minimize。

然而如果你不是使用的webpack1.x,通过排查发现,在css压缩插件未使用的时候,兼容前缀正常,一旦使用了OptimizeCssAssetsPlugin来压缩css就会丢失部分的webkit前缀。

上面有提到,cssnano会使用autoprefixer自动清除掉一些他认为不重要的前缀。而OptimizeCssAssetsPlugin中默认了是使用cssnano。所以我们主动关闭cssnano的autoprefixer功能即可,因为我们已经在postcss中使用了autoprefixer插件,这里无需重复使用。

解决方法如下:

//压缩css代码
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css\.*(?!.*map)/g,  //注意不要写成 /\.css$/g
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { 
                discardComments: {removeAll: true },
                // 避免 cssnano 重新计算 z-index
                 safe: true,
                 //cssnano通过移除注释、空白、重复规则、过时的浏览器前缀以及做出其他的优化来工作,一般能减少至少 50% 的大小
                 //cssnano 集成了autoprefixer的功能。会使用到autoprefixer进行无关前缀的清理。默认不兼容ios8,会去掉部分webkit前缀,比如flex
                 //所以这里选择关闭,使用postcss的autoprefixer功能
                 autoprefixer: false
            },
            canPrint: true
        })

再次编译发现压缩状态时也带有全部的兼容前缀,ios8的不兼容问题即也解决。

参考:

http://www.css88.com/archives/7317

https://github.com/ShowJoy-com/showjoy-blog/issues/31

https://www.w3cplus.com/css/taobao-2018-year.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏k8s

k8s-网络-CNI

CNI(Container Network Interface)容器网络接口,CNCF项目,一种通用的基于插件的网络解决方案。CNI分为两个库,一个用于定义规范...

2555
来自专栏木制robot技术杂谈

用Python模拟登陆微博

前言 最近在研究模拟登陆,看了很多教程,发现基本上都是只教怎么处理后就能登陆成功,没有讲解怎样得到处理的方法。经过的一天的研究,把微博模拟登陆基本上弄清楚了,下...

3449

使用chmod修改文件权限

类Unix系统,包括在Linode平台上运行的Linux系统,具有非常强大的访问控制系统,允许系统管理员有效地配置多个用户的访问权限,而无需给予每个用户...

1283
来自专栏跟着阿笨一起玩NET

asp.net中使用swfupload上传大文件

转载:http://www.cnblogs.com/niunan/archive/2012/01/12/2320705.html

594
来自专栏云计算教程系列

如何在Debian 9上安装Docker Compose

Docker是一个很好的工具,用于在软件容器中自动部署Linux应用程序,但要充分利用其潜力,应用程序的每个组件都应该在自己的单独容器中运行。对于具有大量组件的...

762
来自专栏程序员的碎碎念

ThinkPHP+PHPExcel实现excel导入导出数据(一)

没错,今天又将是一篇技术帖,一篇关于tp进阶学习的教程,看标题你就知道我要做的是什么啦? 首先我带大家科普一下什么是phpexcel? ? ...

2945
来自专栏前端小叙

vue项目在安卓低版本机显示空白原因

查看安卓debug,报错,可能有箭头函数语法错误,或者其他语法问题,那可能是ES6语法问题。

641
来自专栏前端儿

在找一份相对完整的Webpack项目配置指南么?这里有

Webpack已升级为v4版本,优化之后性能提升好几倍,请移步这个 webpack4项目配置Demo,以及 这篇升级优化点

1211
来自专栏葡萄城控件技术团队

你不得不知道的Visual Studio 2012(2)- 全新调试功能

Windows 8 带来了一种新的应用程序生命周期模型,其中 Windows 商店应用程序会为用户自动管理。即使它们从未运行过,也没有显示在屏幕上,这些应用程序...

1727
来自专栏JAVA同学会

MAVEN简介之——settings.xml

Maven的settings.xml配置了Maven执行的方式,像pom.xml一样,但是它是一个通用的配置,

1340

扫码关注云+社区