zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    深入浅出百度地图API开发系列(3):模块化设计
    深入浅出百度地图API开发系列(2):创建地图
    深入浅出百度地图API开发系列(1):前言
    使用分页助手pageHelper,方便快捷
    mybatis注解模糊查询的两种方式
    idea svn 提交拉取代码抛出 Error:'C:Program' 不是内部或外部命令,也不是可运行的程序 或批处理文件
    Could not open ServletContext resource [/WEB-INF/applicationContext.xml]”解决方案
    com.sun.jersey.api.client.UniformInterfaceException
    org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.exceptions.PersistenceException:
    继承关系,子类初始化,类中成员的加载顺序
  • 原文地址:https://www.cnblogs.com/saysmy/p/9021598.html
Copyright © 2011-2022 走看看