讓你的 webpack sass 和 css 處理性能 10 倍提高

時間 2019-11-06

標籤讓你 webpack sass css 處理性能提高欄目 CSS 简体版

原文原文鏈接

是的, 你沒有聽錯, 今天介紹的兩款 loader 能讓你的 webpack 在處理 sass 和 css 時性能提高 10 倍以上, 他們分別是:css

看名字就知道, 它們相比官方版本的 loader 要更快, 那到底有多快? 下面給個性能對比.前端

性能對比

fast-sass-loader vs sass-loader

280+ 以上的 sass 文件測試結果以下:webpack

sass-loader: 8517.218ms (7.15MB)
fast-sass-loader: 1912.218ms (649KB)

能夠看到 fast-sass-loader 的性能遠高於 sass-loader, 而且因爲去重功能, 其打包的體積更小:git

連接: github.com/yibn2008/fa…github

fast-css-loader vs css-loader

24000+ 行數的 css 文件測試結果以下:web

css-loader: 1644 ms (608KB)
fast-css-loader: 116 ms (608KB)

能夠看到, 加載性能已經超過了 10 倍, 達到 14 倍左右了:後端

連接: github.com/yibn2008/fa…sass

使用方法

使用方法和原版是類似的:post

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'fast-css-loader' // 替換你原先的 css-loader
                ]
            },
            {
                test: /\.(sass|scss)$/,
                use: [
                    'style-loader',
                    'fast-css-loader', // 替換你原先的 css-loader
                    'fast-sass-loader' // 替換你原先的 sass-loader
                ]
            }
        ]
    }
}
複製代碼

背後的原理

看到這裏, 你大概會問爲啥這兩個 loader 要比官方快? 其實得問官方版本的 loader 慢在哪裏.性能

fast-sass-loader

對於 sass-loader 而言, 最大的問題是沒有去重, 致使 sass 文件重複編譯, 所以 fast-sass-loader 最核心的地方在於針對 sass 文件去重.

此外, fast-sass-loader 解決了 sass 文件中 url 解析的問題. 原版 sass-loader 沒法很好的處理 url(...) 中相對路徑的問題 (編譯前和編譯後, 相對路徑是會變的), 須要使用 url-resolve-loader, 但這個 loader 與 sourceMap 結合時又有許多 bug, 這在方面 fast-sass-loader 要作的更好.

固然, fast-sass-loader 確實是捨棄了一些特性以實現性能的提高:

不支持 sourceMap (我的認爲 sass 的 sourceMap 無關緊要)
不支持 importer 選項
不支持某些寫法

fast-css-loader

css-loader 中最影響性能的部分是 postcss 解析 css 的過程, 當 css 文件很是大時, 這一過程會特別慢, 而 fast-css-loader 則採用了正則和一些小技巧來實現 css 的解析, 在達到相同效果的前提下性能獲得大幅提高.

因爲未使用 postcss, 所以 fast-css-loader 也捨棄一些特性:

不支持 sourceMap (我的認爲 css 的 sourceMap 無關緊要)
不支持 css module
不支持在 js 中導出 css 模塊

背後的故事

寫這兩個 loader 的動機是咱們的項目中有很是大規模的 sass 和 css, 原先的 sass-loader 和 css-loader 難以知足咱們對性能的要求. 其中 fast-sass-loader 已在不少內部項目中普遍使用, 效果良好; 而 fast-css-loader 則是新鮮出爐的.

歡迎你們在本身的項目中試用 fast-sass-loader 和 fast-css-loader, 若是以爲不錯就加個 star 吧, 哈哈.

若是使用遇到問題, 請提 ISSUE 或直接 PR ~