亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

張漢慶 / 1012人閱讀

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

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

fast-sass-loader

fast-css-loader

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

性能對(duì)比 fast-sass-loader vs sass-loader

280+ 以上的 sass 文件測(cè)試結(jié)果如下:

sass-loader: 8517.218ms (7.15MB)

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

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

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

fast-css-loader vs css-loader

24000+ 行數(shù)的 css 文件測(cè)試結(jié)果如下:

css-loader: 1644 ms (608KB)

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

可以看到, 加載性能已經(jīng)超過(guò)了 10 倍, 達(dá)到 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
                ]
            }
        ]
    }
}
背后的原理

看到這里, 你大概會(huì)問(wèn)為啥這兩個(gè) loader 要比官方快? 其實(shí)得問(wèn)官方版本的 loader 慢在哪里.

fast-sass-loader

對(duì)于 sass-loader 而言, 最大的問(wèn)題是沒(méi)有去重, 導(dǎo)致 sass 文件重復(fù)編譯, 因此 fast-sass-loader 最核心的地方在于針對(duì) sass 文件去重.

此外, fast-sass-loader 解決了 sass 文件中 url 解析的問(wèn)題. 原版 sass-loader 無(wú)法很好的處理 url(...) 中相對(duì)路徑的問(wèn)題 (編譯前和編譯后, 相對(duì)路徑是會(huì)變的), 需要使用 url-resolve-loader, 但這個(gè) loader 與 sourceMap 結(jié)合時(shí)又有許多 bug, 這在方面 fast-sass-loader 要做的更好.

當(dāng)然, fast-sass-loader 確實(shí)是舍棄了一些特性以實(shí)現(xiàn)性能的提升:

不支持 sourceMap (個(gè)人認(rèn)為 sass 的 sourceMap 可有可無(wú))

不支持 importer 選項(xiàng)

不支持 某些寫法

fast-css-loader

css-loader 中最影響性能的部分是 postcss 解析 css 的過(guò)程, 當(dāng) css 文件非常大時(shí), 這一過(guò)程會(huì)特別慢, 而 fast-css-loader 則采用了正則和一些小技巧來(lái)實(shí)現(xiàn) css 的解析, 在達(dá)到相同效果的前提下性能得到大幅提升.

由于未使用 postcss, 因此 fast-css-loader 也舍棄一些特性:

不支持 sourceMap (個(gè)人認(rèn)為 css 的 sourceMap 可有可無(wú))

不支持 css module

不支持在 js 中導(dǎo)出 css 模塊

背后的故事

寫這兩個(gè) loader 的動(dòng)機(jī)是我們的項(xiàng)目中有非常大規(guī)模的 sass 和 css, 原先的 sass-loader 和 css-loader 難以滿足我們對(duì)性能的要求. 其中 fast-sass-loader 已在很多內(nèi)部項(xiàng)目中廣泛使用, 效果良好; 而 fast-css-loader 則是新鮮出爐的.

歡迎大家在自己的項(xiàng)目中試用 fast-sass-loader 和 fast-css-loader, 如果覺(jué)得不錯(cuò)就加個(gè) star 吧, 哈哈.

如果使用遇到問(wèn)題, 請(qǐng)?zhí)?ISSUE 或直接 PR ~

廣告時(shí)間

最后, 放個(gè)招聘貼, 我來(lái)自阿里新零售事業(yè)群的 CBU 技術(shù)部, 所在的團(tuán)隊(duì)擁有 B2B 規(guī)模最大的運(yùn)營(yíng)搭建平臺(tái), 有全集團(tuán)領(lǐng)先的一站式前端工程研發(fā)平臺(tái), 我們專注于技術(shù)驅(qū)動(dòng), 致力于前端研發(fā)效能的提升, 推動(dòng)業(yè)務(wù)快速增長(zhǎng).

我們新零售事業(yè)群廣招各類優(yōu)秀技術(shù)人才, 包含各類前后端, 測(cè)試, 設(shè)計(jì), 產(chǎn)品等, 機(jī)會(huì)多多, 若有意向請(qǐng)與我聯(lián)系哦, 郵箱: "zoujie.wzj##alibaba-inc.com".replace("##", "@")

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/113228.html

相關(guān)文章

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問(wèn)答，但會(huì)議的視頻目前都還沒(méi)放出來(lái)，有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國(guó)外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    mikasa 評(píng)論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問(wèn)答，但會(huì)議的視頻目前都還沒(méi)放出來(lái)，有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國(guó)外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    李世贊 評(píng)論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對(duì)應(yīng)的實(shí)錄和問(wèn)答，但會(huì)議的視頻目前都還沒(méi)放出來(lái)，有心的同學(xué)如果找到了歡迎分享。建議中英文對(duì)照閱讀。英文原文前端獨(dú)立技術(shù)博客推薦推薦一些現(xiàn)在還在堅(jiān)持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國(guó)外美女。 CSS 樣式書寫規(guī)范最佳實(shí)踐 本文的所列是實(shí)踐當(dāng)中得出的一套比較不錯(cuò)的 CSS 書寫規(guī)范，可以結(jié)合自身團(tuán)隊(duì)發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    MudOnTire 評(píng)論0 收藏0

  • 前端學(xué)習(xí)路線

    摘要：具體來(lái)說(shuō)，包管理器就是可以通過(guò)命令行，幫助你把外部庫(kù)和插件放到你的項(xiàng)目里面并在之后進(jìn)行版本升級(jí)，這樣就不用手工復(fù)制和更新庫(kù)?，F(xiàn)在有的包管理器主要是和。 一、基礎(chǔ) 1、學(xué)習(xí)HTML基礎(chǔ) HTML給你的網(wǎng)頁(yè)賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學(xué)習(xí)語(yǔ)法以及它必須提供的一切。你的學(xué)習(xí)應(yīng)該聚焦在下面這些東西上： 學(xué)習(xí)HTML基礎(chǔ)，了解如何編寫語(yǔ)義HTML 理解如何把網(wǎng)頁(yè)分...

    FullStackDeveloper 評(píng)論0 收藏0

  • 前端學(xué)習(xí)路線

    摘要：具體來(lái)說(shuō)，包管理器就是可以通過(guò)命令行，幫助你把外部庫(kù)和插件放到你的項(xiàng)目里面并在之后進(jìn)行版本升級(jí)，這樣就不用手工復(fù)制和更新庫(kù)。現(xiàn)在有的包管理器主要是和。 一、基礎(chǔ) 1、學(xué)習(xí)HTML基礎(chǔ) HTML給你的網(wǎng)頁(yè)賦予了結(jié)構(gòu)。它就像是人的骨架那樣讓你保持站立。首先你需要去學(xué)習(xí)語(yǔ)法以及它必須提供的一切。你的學(xué)習(xí)應(yīng)該聚焦在下面這些東西上： 學(xué)習(xí)HTML基礎(chǔ)，了解如何編寫語(yǔ)義HTML 理解如何把網(wǎng)頁(yè)分...

    20171112 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<