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