让你的 webpack sass 和 css 处理性能 10 倍提高

是的, 你没有听错, 今天介绍的两款 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 确实是舍弃了一些特性以实现性能的提高:

1. 不支持 sourceMap (我的认为 sass 的 sourceMap 无关紧要)
2. 不支持 importer 选项
3. 不支持 某些写法

fast-css-loader

css-loader 中最影响性能的部分是 postcss 解析 css 的过程, 当 css 文件很是大时, 这一过程会特别慢, 而 fast-css-loader 则采用了正则和一些小技巧来实现 css 的解析, 在达到相同效果的前提下性能获得大幅提高.

因为未使用 postcss, 所以 fast-css-loader 也舍弃一些特性:

1. 不支持 sourceMap (我的认为 css 的 sourceMap 无关紧要)
2. 不支持 css module
3. 不支持在 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('##', '@')