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 条评论
登录 后参与评论

相关文章

来自专栏java思维导图

【读书笔记】1.2、基于HTTP协议的RPC

1.2.1HTTP协议栈 HTTP协议 Hypertext Transfer Protocol的缩写(超文本传输协议) 属于应用层协议,构建在TCP与IP协议之...

3245
来自专栏达观数据

干货分享丨达观数据基于webpack实现web工程

01 引言 随着互联网前端技术的发展,在前端工程愈发复杂多变的今天,模块化已经变成了前端从业者津津乐道的话题,各种模块化工具层出不穷。seajs, requi...

34811
来自专栏流柯技术学院

Tomcat性能调优方案

一、操作系统调优  对于操作系统优化来说,是尽可能的增大可使用的内存容量、提高CPU的频率,保证文件系统的读写速率等。经过压力测试验证,在并发连接很多的情况下,...

912
来自专栏小白安全

绕过Edge、Chrome和Safari的内容安全策略

概述 ---- Web应用中有许多基本的安全机制,其中一个是同源(same-origin)策略机制,该机制规定了应用程序代码可以访问的资源范围。同源策略的...

4117
来自专栏北京马哥教育

20个可能你不知道Linux网路工具

如果要在你的系统上监控网络,那么使用命令行工具是非常实用的,并且对于 Linux 用户来说,有着许许多多现成的工具可以使用,如: nethogs, ntopng...

40410
来自专栏网站设计制作、数字营销

做网站知识之域名解析易懂介绍

公司在做网站时,在购买了域名、主机空间、及网站源代码和数据库都做好了之后,如果网站备案通过了,就可以做域名解析,如果解析设置没有问题,10分钟之后网站就可正常打...

2234
来自专栏Python研发

程序中的异步和同步

同步:   主机A发送数据的时候,主机B必须等待接收,处于阻塞状态,这就好比别人给你打电话,你必须当场听话,否则则【错失良机】。

842
来自专栏网站设计制作、数字营销

做网站知识之域名解析易懂介绍

公司在做网站时,在购买了域名、主机空间、及网站源代码和数据库都做好了之后,如果网站备案通过了,就可以做域名解析,如果解析设置没有问题,10分钟之后网站就可正常打...

1370
来自专栏python3

python3--socket编程(tcp协议)

Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口。在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在S...

1102
来自专栏重庆的技术分享区

域名解析后主机记录和记录值怎么填写?都是什么意思?

8.8K5

扫码关注云+社区