less-loader 速度很慢问题分析

背景描述

1. 使用技术栈：typescript、react、react-router、mobx、less
2. 问题描述：最近新开发一个项目，本来就是很正常的进行 webpack 的配置，项目刚开始，本就没有多少业务代码，启动的时候总觉得有点慢，让我很是迷惑，这项目不是应该 3、 5 秒就跑起来的吗？怎么总是住了，我很是疑惑，所以就用 speed-measure-webpack-plugin 进行测速，结果就如下图

这样看来问题就很明显了呀，但是，项目刚开始，less 文件都没有几个，代码也都很少，为什么能占用这么多时间呢？

问题分析

1. 是 less-loader 的问题？

我的第一个感觉会不会是 less-loader 慢呢？但是我转念一想，这不可能呀，只听过 babel-loader，ts-loader 慢，没听过 less-loader 慢呀，就算慢，这是不是有点太慢了？我觉得不太可能，所以并没有在这个方向上耗费多少时间

2. 用 thread-loader 加速？

我在社区上寻找遇到相同问题的人，以求获得解决方案，但是收获甚少，有人觉得慢，但是大家给出的方案都是用 thread-loader 或者 happypack。但是这显然不符合我自身的场景，thread-loader 要在多文件的情况下，开始多进程/多实例才有效果，如果文件数量少，反而会使打包速度变慢。

3. 检查配置

我把注意力转到我的 webpack 配置上，我觉得应该是配置出了问题，一番检查之后，并没有发现什么 “不合理” 的地方，唯一觉得少点什么的，应该就是没有在 loader 上配置 include 和 exclude，我尝试着把 include 的配置上去，但是几乎没有效果。我把目光锁在这个 loader 上，经过半个小时的挣扎后，我觉得把里头的配置都理一遍，最后发现，一处可疑的点

module.exports = {
	...
	module: {
		rules: [
			...
			{
				test: /\.less|css$/,
		        exclude: '/node_modules',
		        include: srcPath,
		        use: [
		          { loader: devMode ? 'style-loader' : MiniCssExtractPlugin.loader },
		          {
		            loader: 'css-loader',
		            options: {
		              importLoaders: 1
		            }
		          }
		          ...
		        ]
	      	}
	      }
		]
	}
	...
}

importLoaders 的值是1？我为啥要配置这个呢？可能是抄了之前项目的配置忘了改了，我就去查了一下这个 importLoaders 的作用，这 Stack Overflow 看到这样一个回答：

大致意思就是：css 文件中如果有 @import 语句，importLoaders 的作用是决定 @import 模块在使用 css-loader 前，要使用几个其它的loader 处理。但是 importLoaders 只对没有(unresolved) 的 @import 起作用。所以我觉得把这个 options 去掉。默认值是0。

最后结果（如图）符合预期。

总结

在做项目配置的时候，最好是理清楚每一个配置项的作用和目的之后再进行配置，不然很容易导致一些未知的问题，并且排查起来也没有思路。平时也要多总结，多做记录。就像网站的访问记录一样，要留住有价值的信息。