使用Webpack降低sass加载程序的构建时间 总结

当我们转而使用Webpack来处理SASS文件时，我们注意到在某些情况下，我们的构建时间变得非常缓慢。在使用测量了构建的不同部分的性能之后，似乎是罪魁祸首…构建很容易需要10秒（在我们进行一些修复之前，通常需要20秒），这比我们希望的要长

我很好奇，人们是否有其他策略来优化构建Sass资产，而我没有涉及这些策略。在这一点上，我已经经历了很多次了（其中一些已经经历了多次），但似乎仍然无法将构建时间降低到足够低的程度。就目标而言，目前一次大型重建（例如对许多文件中使用的组件进行更改）很容易需要10-12秒，如果可能的话，我希望将其缩短到5秒

尝试过的解决方案 我们尝试了许多不同的解决方案，有些有效，有些没有多大帮助

• -这一个相当好用。根据构建的缓存情况，它能够将构建时间缩短几秒钟
• 删除重复的导入（如将相同的“variables.sass”文件导入多个位置）-这也将生成时间缩短了几秒钟
• 将SASS和scs的组合更改为scs-我不确定这有什么帮助，但它似乎确实缩短了我们的构建时间。可能是因为所有文件都是相同的文件类型，所以更容易编译？（这里可能发生了其他事情来混淆结果，但它似乎一直有帮助）
• 将sass loader替换为-许多人都建议这样做，但当我让它工作时，它似乎根本没有改变构建时间。我不知道为什么…可能是配置问题
• 利用-这似乎也没有任何改善
• 禁用Sass源映射-这似乎产生了很大的影响，将构建时间减少了一半（从应用更改时开始）
• 尝试对从节点_模块加载的SASS使用

  includePaths

  ——这是在我发现的一个示例上提出的，其中SASS加载程序与他们称之为“自定义导入程序”的东西有问题。我的理解是，通过使用includePaths，SASS能够依赖于提供的绝对路径，而不是使用低效的算法来解析到节点模块等位置的路径

从一些简短的统计数据来看，我们似乎有大约16k行SASS代码分布在150个SASS文件中。一些文件有相当数量的代码，而另一些则更少，这些文件中的LOC的简单平均值约为107 LOC/file

下面是正在使用的配置。该应用程序是一个Rails应用程序，因此很多Webpack配置都是通过Webpacker gem处理的

{
“模式”：“生产”，
“产出”：{
“文件名”：“js/[name].js”，
“chunkFilename”：“js/[name].js”，
“hotUpdateChunkFilename:“js/[id]-[hash].hot update.js”，
“路径”：“myApp/public/packs”，
“publicPath”：“/packs/”
},
“决心”：{
“扩展”：[“.mjs”、“.js”、“.sass”、“.scss”、“.css”、“.module.sass”、“.module.scss”、“.module.css”、“.png”、“.svg”、“.gif”、“.jpeg”]，
“插件”：[{
“topLevelLoader”：{}
}],
“模块”：[“myApp/app/assets/javascript”、“myApp/app/assets/css”、“node_模块”]
},
“resolveLoader”：{
“模块”：[“节点_模块”]，
“插件”：[{}]
},
“节点”：{
“dgram”：“空”，
“fs”：“空”，
“净”：“空”，
“tls”：“空”，
“子进程”：“空”
},
“devtool”：“源映射”，
“统计”：“正常”，
“保释”：没错，
“优化”：{
“最小化”：[{
“选择”：{
“测试”：{}，
“评论”：错误，
“源地图”：正确，
“缓存”：正确，
“平行”：正确，
“terserOptions”：{
“产出”：{
“ecma”：5，
“评论”：错，
“仅ascii_”：真
},
“解析”：{
“ecma”：8
},
“压缩”：{
“ecma”：5，
“警告”：错误，
“比较”：错误
},
“裂口”：{
“safari10”：真的吗
}
}
}
}],
“分割块”：{
“块”：“全部”，
“名称”：假
},
“runtimeChunk”：true
},
“外部”：{
“时刻”：“时刻”
},
“条目”：{
“entry1”：“myApp/app/assets/javascript/packs/entry1.js”，
“entry2”：“myApp/app/assets/javascript/packs/entry2.js”，
“entry3”：“myApp/app/assets/javascript/packs/entry3.js”，
“entry4”：“myApp/app/assets/javascript/packs/entry4.js”，
“entry5”：“myApp/app/assets/javascript/packs/entry5.js”，
“entry6”：“myApp/app/assets/javascript/packs/entry6.js”，
“entry7”：“myApp/app/assets/javascript/packs/entry7.js”，
“entry8”：“myApp/app/assets/javascript/packs/entry8.js”，
“landing”：“myApp/app/assets/javascript/packs/landing.js”，
“entry9”：“myApp/app/assets/javascript/packs/entry9.js”，
“entry10”：“myApp/app/assets/javascript/packs/entry10.js”，
“entry11”：“myApp/app/assets/javascript/packs/entry11.js”，
“entry12”：“myApp/app/assets/javascript/packs/entry12.js”，
“entry13”：“myApp/app/assets/javascript/packs/entry13.js”，
“entry14”：“myApp/app/assets/javascript/packs/entry14.js”，
“entry15”：“myApp/app/assets/javascript/packs/entry15.js”
},
“模块”：{
“StrightExportPresence”：没错，
“规则”：[{
“解析器”：{
“RequiredSure”：false
}
}, {
“测试”：{}，
“使用”：[{
“加载器”：“文件加载器”，
“选择”：{
“上下文”：“app/assets/javascript”
}
}]
}, {
“测试”：{}，
“使用”：[“myApp/node_modules/mini css extract plugin/dist/loader.js”{
“加载器”：“css加载器”，
“选择”：{
“源地图”：正确，
“进口装载者”：2，
“localIdentName”：“[name]____[hash:base64:5]”，