是的，你没有听错。今天介绍的两个loader，在处理sass和css的时候，可以让你的webpack性能提升10倍以上。它们是：fast-sass-loaderfast-css-loader看名字就知道了，它们和正式版的loader相比，速度更快，那么到底有多快呢？这是性能比较。性能对比fast-sass-loadervssass-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#performancefast-css-loadervscss-loader24000+行css文件测试结果如下：css-loader:1644ms(608KB)fast-css-loader:116ms(608KB)可以查看现在加载性能已经超过10倍，达到14倍左右：链接：https://github.com/yibn2008/fast-css-loader#vs-css-loader使用方法和原来的差不多version:module.exports={module:{rules:[{test:/\.css$/,use:['style-loader','fast-css-loader'//替换原来的css-loader]},{测试：/\.(sass|scss)$/，使用：['style-loader','fast-css-loader',//替换你原来的css-loader'fast-sass-loader'//替换你原来的sass-loader]}]}}看到这里，你大概知道为什么这两个loader更快比正式版？其实你要问为什么正式版的loader慢。对于sass-loader，fast-sass-loader最大的问题就是没有去重，导致sass文件重复编译。所以fast-sass-loader的核心就是对sass文件进行去重。另外fast-sass-loader解决了sass文件中url解析的问题。原来的sass-loader不能很好的处理url(...)相对路径问题（相对路径在编译前后会发生变化），需要使用url-resolve-loader，但是这个loader是有很多bug的结合sourceMap，这是fast-sass-loader需要做的更好的。当然fast-sass-loader确实放弃了一些特性来实现性能提升：不支持sourceMap（个人认为sass的sourceMap是可选的）不支持importer选项不支持某些写法fast-css-loadercss最有性能-影响-loader的部分是postcss解析css的过程。当css文件很大时，这个过程会特别慢，而fast-css-loader是利用正则化和一些trick来实现css解析的。在达到同样效果的前提下，性能有了很大的提升。由于没有使用postcss，fast-css-loader也舍弃了一些特性：不支持sourceMap（个人认为css的sourceMap是可选的）不支持css模块不支持在js中导出css模块背后的故事动机写这两个loader就是我们项目中有非常大规模的sass和css，原来sass-loader和css-loader很难满足我们的性能要求。其中，fast-sass-loader在很多内部项目中得到了广泛的应用，并取得了不错的效果；而fast-css-loader是新发布的。欢迎在自己的项目中试用fast-loader和fast-css-loader，觉得不错就加个star吧，哈哈。遇到问题请提ISSUE或直接PR~
