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

張漢慶發布于2019-08-29 15:18 / 945人閱讀

摘要：是的你沒有聽錯今天介紹的兩款能讓你的在處理和時性能提升倍以上他們分別是看名字就知道它們相比官方版本的要更快那到底有多快下面給個性能對比性能對比以上的文件測試結果如下可以看到的性能遠高于并且由于去重功能其打包的體積更

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

fast-sass-loader

fast-css-loader

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

性能對比 fast-sass-loader vs sass-loader

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

sass-loader: 8517.218ms (7.15MB)

fast-sass-loader: 1912.218ms (649KB)

可以看到 fast-sass-loader 的性能遠高于 sass-loader, 并且由于去重功能, 其打包的體積更小:

鏈接: https://github.com/yibn2008/fast-sass-loader#performance

fast-css-loader vs css-loader

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

css-loader: 1644 ms (608KB)

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

可以看到, 加載性能已經超過了 10 倍, 達到 14 倍左右了:

鏈接: https://github.com/yibn2008/fast-css-loader#vs-css-loader

使用方法

使用方法和原版是相似的:

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 ~

廣告時間

最后, 放個招聘貼, 我來自阿里新零售事業群的 CBU 技術部, 所在的團隊擁有 B2B 規模最大的運營搭建平臺, 有全集團領先的一站式前端工程研發平臺, 我們專注于技術驅動, 致力于前端研發效能的提升, 推動業務快速增長.

我們新零售事業群廣招各類優秀技術人才, 包含各類前后端, 測試, 設計, 產品等, 機會多多, 若有意向請與我聯系哦, 郵箱: "zoujie.wzj##alibaba-inc.com".replace("##", "@")

GPU云服務器云服務器性能提升提升性能方案提升區塊鏈性能 sqlserver性能提升

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113228.html

HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

mikasa 2019-08-01 18:18 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

李世贊 2019-08-29 14:08 評論0 收藏0
HTML-CSS-JS

摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主，有業界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規范最佳實踐本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范，可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...

MudOnTire 2019-08-21 18:25 評論0 收藏0
前端學習路線

摘要：具體來說，包管理器就是可以通過命令行，幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級，這樣就不用手工復制和更新庫?，F在有的包管理器主要是和。一、基礎 1、學習HTML基礎 HTML給你的網頁賦予了結構。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上：學習HTML基礎，了解如何編寫語義HTML 理解如何把網頁分...

FullStackDeveloper 2019-08-22 16:48 評論0 收藏0
前端學習路線

摘要：具體來說，包管理器就是可以通過命令行，幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級，這樣就不用手工復制和更新庫?，F在有的包管理器主要是和。一、基礎 1、學習HTML基礎 HTML給你的網頁賦予了結構。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上：學習HTML基礎，了解如何編寫語義HTML 理解如何把網頁分...

20171112 2019-08-29 15:12 評論0 收藏0