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

2022-04-15 23:39:46 字數 1517 閱讀 9743

webpack使用postcss的autoprefixer外掛程式,並在壓縮css時使用了cssnano,處理不當的情況下會導致壓縮css後,部分相容字首(比如-webkit-)被刪除的問題。

postcss的autoprefixer配置如下:

autoprefixer()

css壓縮的配置如下:

//

壓縮css**

newoptimizecssassetsplugin(,

//避免 cssnano 重新計算 z-index

safe: true

}, canprint:

true

})

通過查閱資料發現,如果你使用的是webpack1.x版本,uglifyjsplugin這個外掛程式開啟了minimize,導致css-loader也開啟了壓縮,然後css-loader會使用cssnano進行壓縮,而cssnano會使用到autoprefixer進行無關字首的清理。所以可以通過給css-loader新增-autoprefixer引數來告訴css-loader關閉掉autoprefixer這個功能,不要強制刪除某些你覺得不重要的字首。

,

而上述原因已經在webpack2.x修復,webpack2的uglifyjsplugin外掛程式去掉了強制開啟minimize。

然而如果你不是使用的webpack1.x,通過排查發現,在css壓縮外掛程式未使用的時候,相容字首正常,一旦使用了optimizecssassetsplugin來壓縮css就會丟失部分的webkit字首。

上面有提到,cssnano會使用autoprefixer自動清除掉一些他認為不重要的字首。而optimizecssassetsplugin中預設了是使用cssnano。所以我們主動關閉cssnano的autoprefixer功能即可,因為我們已經在postcss中使用了autoprefixer外掛程式,這裡無需重複使用。

解決方法如下:

//

壓縮css**

newoptimizecssassetsplugin(,

//避免 cssnano 重新計算 z-index

safe: true

,

//cssnano通過移除注釋、空白、重複規則、過時的瀏覽器字首以及做出其他的優化來工作,一般能減少至少 50% 的大小

//cssnano 整合了autoprefixer的功能。會使用到autoprefixer進行無關字首的清理。預設不相容ios8,會去掉部分webkit字首,比如flex

//所以這裡選擇關閉,使用postcss的autoprefixer功能

autoprefixer: false

}, canprint:

true

})

再次編譯發現壓縮狀態時也帶有全部的相容字首,ios8的不相容問題即也解決。

參考:

webpack7 css壓縮成單獨的css檔案

先看下下面的 我們可以看到,通過webpack打包後,預設css是通過 內部樣式表 寫入的。我們如何把壓縮後的css單獨匯出為css 呢?1.安裝 extract text webpack plugin next npm i extract text webpack plugin next d2.在...

webpack 對 css 壓縮中對字首的處理

在 vue cli 建立的專案中,用預設的 webpack 配置對專案打包後,發現 css 檔案中樣式的字首有所缺失,例如 flex 這個應該有字首的屬性卻沒有 display webkit flex webkit flex 1 導致樣式在 iphone 6s plus 上出現了相容問題。postc...

Webpack 4 學習08(壓縮優化css)

壓縮css,去除注釋 引數 意義assetnameregexp 正規表示式,用於匹配需要優化或者壓縮的資源名。預設值是 css g cssprocessor 用於壓縮和優化css 的處理器,預設是 cssnano.cssprocessorpluginoptions 傳遞給cssprocessor的外...