laravel-mix 构建scss文件非常慢

帕奇式
  • 848

问题描述

未能定位问题,只知道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秒内构建完成。

回复
阅读 1.4k
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秒,已经可以接受了!

你知道吗?

宣传栏