專案技術棧

React + Webpack4

瀏覽器相容性：較高版本的FireFox，Chrome以及IE9+（注意：坑從此中來）

問題描述

專案在IE9中很多Css Style無法正確的顯示，而在其他瀏覽器中無此類問題。

最好的解決方案當然是徑自宣佈不支援IE9，其實這是合理的，微軟自己都不再維護IE系列，如果死抱著舊的瀏覽器不放，意味著安全得不到保障並且使用者也無法享受到現代瀏覽器新特性帶來的絲滑快感。從前端開發者角度來說，現代前端框架都是建立在較現代瀏覽器基礎至上的，比如Vue，一誕生就宣佈不支援IE8及以下版本。再加上IE系列特別是IE10以下瀏覽器的市場佔有率，也實在沒必要去費力不討好。

但是使用者公司大量的使用著IE9，不論是React還是我們用到的第三方控制元件庫都是宣稱支援IE9+的，如果專案不支援也說不過去。

那麼廢話不多說了，繼續談談解決問題的思路。

問題原因

其他瀏覽器是好的，但是IE顯示有問題。這是前端介面中的經典句式，聽到這種描述的第一反應就是趕緊看看坑爹的IE瀏覽器在支援哪個特定css特性上出了么蛾子。想當年我誤入前端界，掉的一個坑就是IE的。

然而這次卻是截然不同，通過與chrome瀏覽器中樣式的對比，我發現IE9下，對應樣式根本就沒有載入進來!

一個很自然的推斷就是會不會css檔案因為某種原因比如網路問題沒有下載完全，對比過伺服器和IE端css檔案發現是一樣的，並沒有丟失內容的現象。

一度感到很匪夷所思，甚至懷疑我會不會用IE瀏覽器debug (除了解bug基本很少使用IE Developer Tool)。

忽然隱約想起以前很早之前看的一些文章，IE9瀏覽器好像對大尺寸的css有些約束，想到這一層，越想越覺得有道理，問題可能就出在這裡。於是就這方面的問題google了一下，發現的確是這樣。

規則 (Rule) 如下，我就不翻譯了：

• A sheet may contain up to 65534 rules
• A document may use up to 4095 stylesheets
• @import nesting is limited to 4095 levels (due to the 4095 stylesheet limit)

其實我有點不太確定怎麼樣算一條rule，還需要再深挖一下。但是我看的另一篇文章提到過IE9一個css檔案中不能超過4000+ selectors.

另外也有一些文章提到單個css檔案的大小不能超過250k。官方規則中並沒有提到這一條，不過我猜250k大小的css檔案大概也早突破4000個selector了吧。

儘管對官方規則的具體細節還有點疑惑，但是通過閱讀這些材料我們至少了解到IE9對css的selector或是大小是有限制的。知道這條對今後遇到這種問題對症下藥也足夠了。

看一下專案中webpack打包好的css檔案：

可以發現的確有一個檔案很大，達到了281k，經查是我們引用的第三方控制元件庫。

We Get It!!

解決方案

第一個想法是檔案能不能壓縮？或者這個控制元件庫我們是不是沒有按需載入？
查看了一下webpack.config.js，該做的其實都做了。Webpack4中用MiniCssExtractPlugin來做css檔案的提取與壓縮。而第三方控制元件庫也有相應的按需載入配置。這條路是走到頭了。

敲黑板了:

第二個想法就是webpack有沒有相應的外掛可以把這個大尺寸的css再分割成多個css檔案。哎，又Google了一下還真讓我找到了：

Using webpack to generate your CSS is fun for some definitions of fun. Unfortunately the fun stops when you have a large app and need IE9 support because IE9 will ignore any more than ~4000 selectors in your lovely generated CSS bundle. The solution is to split your CSS bundle smartly into multiple smaller CSS files. Now you can.™ Supports source-maps.

根據文件，把這個外掛新增到webpack.config.prd.js中：

const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
...

plugins: [
        ...
        new CSSSplitWebpackPlugin({
            size: 4000,
            filename: 'dist/css/[name]-[part].[ext]'
        }),
        ...
    ]

我們在外掛中定的size是4000，意味著如果css檔案中的Rule超過了4000也就是IE9的上限，我們就將檔案分割。

執行結果如下：

測試結果通過，之前被丟棄的樣式被IE9成功載入!

尾聲（潛在風險）

儘管最大的痛點已經解決了，但是在執行過程中還是出了一個很有意思小bug。專案中有個”另存為”按鈕，點選會彈出一個框，可以確定或者取消來關閉對話方塊。但是在關閉過程中發現一些莫名奇妙的動畫效果。經過調查，原因如下：

1. Webpack中OptimizeCSSAssetsPlugin外掛為節省位元組數，重新命名@keyframes，例如: @keyframes a, @keyframes b 等等。在單個檔案中從a到z沒有什麼問題。
2. 我們之前引入的 css-split-webpack-plugin 將css檔案一分為二，兩個分割後的css檔案中都有動畫效果，都是以a,b,c這樣的格式命名。導致一些不屬於該對話方塊的動畫效果被意外添加了進來。

最後的解決方案其實也很簡單，在OptimizeCSSAssetsPlugin的option中規定壓縮css檔案中不改變@keyframes的名字。

optimization: {
        minimizer: [
            ....
            new OptimizeCSSAssetsPlugin({
                cssProcessor: require('cssnano')({
                    reduceIdents: false
                })
            })
        ],
       ....
    }

問題解決！！

最後，真心希望客戶趕緊升級單位的IE系統，你好我好大家好！