本文共 1619 字,大约阅读时间需要 5 分钟。
背景描述
- 使用技术栈:
typescript
、react
、react-router
、mobx
、less
- 问题描述:最近新开发一个项目,本来就是很正常的进行
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。
最后结果(如图)符合预期。
总结
在做项目配置的时候,最好是理清楚每一个配置项的作用和目的之后再进行配置,不然很容易导致一些未知的问题,并且排查起来也没有思路。平时也要多总结,多做记录。就像网站的访问记录一样,要留住有价值的信息。
转载地址:https://blog.csdn.net/qq_42501092/article/details/125159604 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!