webpack的css壓縮不相容IOS8問題探索

標籤：int   壓縮   z-index   roi   ios   tao   就會   comm   set   

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

 

webpack的css壓縮不相容IOS8問題探索