laravel-mix 构建scss文件非常慢

Question

问题描述

未能定位问题，只知道laravel-mix构建scss文件的时候非常慢，一次构建需要等86秒。

问题出现的环境背景及自己尝试过哪些方法

曾尝试把图片文件目录地址添加至alias，貌似速度提升了，耗时降至40秒。

相关代码

laravel-mix配置

const sourcePath = "resources/sources"

mix
    .webpackConfig({
        resolve: {
            alias: {
                '@': __dirname + `/${sourcePath}`,
                '@ASSETS': __dirname + `/${sourcePath}/assets`
            }
    }
})

静态资源引用方式

&-brand{
    a{
        display: block;
        background-image: url("~@ASSETS/imgs/logo.png");
        background-repeat: no-repeat;
        background-size: contain;
        width: 160px;
        height: 50px;
    }
}

你期待的结果是什么？

能否大幅加快构建速度？比如10秒内构建完成。

Answer 1

在laravel-mix找到问题了issues#287，里面讨论并逐步梳理问题，其中加快速度的办法可以去掉sourceMap设置等讨论，最后howdu提到将processCssUrls设置关闭得到广泛认可，下面是具体设置。

mix.sass('resources/assets/app/app.scss', 'public/css')
   .options({
      processCssUrls: false
   });

但是这里有个弊端，关闭后静态资源需要手动搬至构建目录，而scss文件中所写的路径也是生产路径（不是当前开发目录的路径），如不是新项目开初的设定而是旧项目更改需要变动很多地方，不实用！

WARNING in ./resources/sources/web/common/styles/main.scss (./node_modules/css-loader??ref--5-2!./node_modules/
postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/lib/loader.
js??ref--5-5!./resources/sources/web/common/styles/main.scss)
Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

再仔细看错误提示发现sass-loader之前有个resolve-url-loader，感觉这个是切入点谷歌一下发现scss构建巨慢的元凶的确是它。resolve-url-loader能帮助sass定位文件具体路径，如果在scss文件中较多使用@import，将会导致性能问题。

去npmjs.com查看resolve-url-loader发现已经到3.1.0版本，再看看本地安装的是2.3.2版本，好了先尝试更新一波。

最后结果是完美解决了性能问题，构建耗时从40秒缩短至11秒，已经可以接受了！