摘要：是的你没有听错今天介绍的两款能让你的在处理和时性能提升倍以上他们分别是看名字就知道它们相比官方版本的要更快那到底有多快下面给个性能对比性能对比以上的文件测试结果如下可以看到的性能远高于并且由于去重功能其打包的体积更
是的, 你没有听错, 今天介绍的两款 loader 能让你的 webpack 在处理 sass 和 css 时性能提升 10 倍以上, 他们分别是:
fast-sass-loader
fast-css-loader
看名字就知道, 它们相比官方版本的 loader 要更快, 那到底有多快? 下面给个性能对比.
性能对比 fast-sass-loader vs sass-loader280+ 以上的 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-loader24000+ 行数的 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-loadercss-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("##", "@")
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113228.html
摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...
摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...
摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...
摘要：具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是和。 一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上： 学习HTML基础，了解如何编写语义HTML 理解如何把网页分...
阅读 840·2021-11-16 11:56
阅读 1652·2021-11-16 11:45
阅读 3107·2021-10-08 10:13
阅读 4091·2021-09-22 15:27
阅读 725·2019-08-30 11:03
阅读 641·2019-08-30 10:56
阅读 945·2019-08-29 15:18
阅读 1737·2019-08-29 14:05
