資訊專欄INFORMATION COLUMN
摘要：是的你沒有聽錯今天介紹的兩款能讓你的在處理和時性能提升倍以上他們分別是看名字就知道它們相比官方版本的要更快那到底有多快下面給個性能對比性能對比以上的文件測試結(jié)果如下可以看到的性能遠高于并且由于去重功能其打包的體積更
是的, 你沒有聽錯, 今天介紹的兩款 loader 能讓你的 webpack 在處理 sass 和 css 時性能提升 10 倍以上, 他們分別是:
fast-sass-loader
fast-css-loader
看名字就知道, 它們相比官方版本的 loader 要更快, 那到底有多快? 下面給個性能對比.
性能對比 fast-sass-loader vs sass-loader280+ 以上的 sass 文件測試結(jié)果如下:
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-loader24000+ 行數(shù)的 css 文件測試結(jié)果如下:
css-loader: 1644 ms (608KB)
fast-css-loader: 116 ms (608KB)
可以看到, 加載性能已經(jīng)超過了 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 結(jié)合時又有許多 bug, 這在方面 fast-sass-loader 要做的更好.
當然, fast-sass-loader 確實是舍棄了一些特性以實現(xiàn)性能的提升:
不支持 sourceMap (個人認為 sass 的 sourceMap 可有可無)
不支持 importer 選項
不支持 某些寫法
fast-css-loadercss-loader 中最影響性能的部分是 postcss 解析 css 的過程, 當 css 文件非常大時, 這一過程會特別慢, 而 fast-css-loader 則采用了正則和一些小技巧來實現(xiàn) css 的解析, 在達到相同效果的前提下性能得到大幅提升.
由于未使用 postcss, 因此 fast-css-loader 也舍棄一些特性:
不支持 sourceMap (個人認為 css 的 sourceMap 可有可無)
不支持 css module
不支持在 js 中導出 css 模塊
背后的故事寫這兩個 loader 的動機是我們的項目中有非常大規(guī)模的 sass 和 css, 原先的 sass-loader 和 css-loader 難以滿足我們對性能的要求. 其中 fast-sass-loader 已在很多內(nèi)部項目中廣泛使用, 效果良好; 而 fast-css-loader 則是新鮮出爐的.
歡迎大家在自己的項目中試用 fast-sass-loader 和 fast-css-loader, 如果覺得不錯就加個 star 吧, 哈哈.
如果使用遇到問題, 請?zhí)?ISSUE 或直接 PR ~
廣告時間最后, 放個招聘貼, 我來自阿里新零售事業(yè)群的 CBU 技術(shù)部, 所在的團隊擁有 B2B 規(guī)模最大的運營搭建平臺, 有全集團領(lǐng)先的一站式前端工程研發(fā)平臺, 我們專注于技術(shù)驅(qū)動, 致力于前端研發(fā)效能的提升, 推動業(yè)務快速增長.
我們新零售事業(yè)群廣招各類優(yōu)秀技術(shù)人才, 包含各類前后端, 測試, 設(shè)計, 產(chǎn)品等, 機會多多, 若有意向請與我聯(lián)系哦, 郵箱: "zoujie.wzj##alibaba-inc.com".replace("##", "@")
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113228.html
摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團隊發(fā)展出一套適合自己業(yè)務的規(guī)范。 CSS中的字體與排版...
摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團隊發(fā)展出一套適合自己業(yè)務的規(guī)范。 CSS中的字體與排版...
摘要：本周于上海閉幕，掘金和知乎上都有對應的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團隊發(fā)展出一套適合自己業(yè)務的規(guī)范。 CSS中的字體與排版...
摘要：具體來說，包管理器就是可以通過命令行，幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級，這樣就不用手工復制和更新庫?，F(xiàn)在有的包管理器主要是和。 一、基礎(chǔ) 1、學習HTML基礎(chǔ) HTML給你的網(wǎng)頁賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上： 學習HTML基礎(chǔ)，了解如何編寫語義HTML 理解如何把網(wǎng)頁分...
閱讀 858·2021-11-16 11:56
閱讀 1679·2021-11-16 11:45
閱讀 3126·2021-10-08 10:13
閱讀 4126·2021-09-22 15:27
閱讀 736·2019-08-30 11:03
閱讀 655·2019-08-30 10:56
閱讀 962·2019-08-29 15:18
閱讀 1751·2019-08-29 14:05
