V
V
Vladimir Ponomarev2015-11-07 03:30:22
css
Vladimir Ponomarev, 2015-11-07 03:30:22

Why is Less slow?

Hello,
I'm trying to get involved in frontend build automation based on Gulp, Browser sync, etc. And while sawing my build system and using it for test tasks, everything was fine. But then a certain project arose, it was necessary to make up about 15 pages, here I used the Less preprocessor as well as Less files from bootstrap.
At first, everything worked pretty fast, but at some point I began to feel a strong delay after the moment the changes were saved in the Less file and until the browser state was updated by Browser sync. As a result, you have to wait about 10 seconds, which is extremely inconvenient. Is this normal for Less at this volume?
Output CSS files in the region of 260 Kb are obtained, these are not compressed. In this case, source-maps are also not involved. The problem is in Less, which was fixed by disabling the latter and checking the processing speed of the next change in the style file.
Here is an example of a task for building styles from Gulp:

gulp.src(allStyles)   
        .pipe(gulpif(buildOpts.devbuild && buildOpts.compress, sourcemaps.init()))
        .pipe(gulpif(buildOpts.styletype === 'less', less()))
        .on('error', handleError('LESS PREPROCESSING'))
        .pipe(gulpif(buildOpts.styletype === 'scss', sass(buildOpts.sassOpts)))
        .on('error', handleError('SCSS PREPROCESSING'))
        .pipe(prefixer(buildOpts.autoprefixerOpts))
        .on('error', handleError('CSS PREFIXER'))
        .pipe(gulpif(!buildOpts.devbuild || buildOpts.compress, cssmin()))
        .pipe(gulpif(buildOpts.devbuild && buildOpts.compress, sourcemaps.write()))
        .pipe(gulp.dest(destDir))
        .on('end', function() { 
            browserSync.reload();
            someDeferred.resolve(); 
        });

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Vladimir Ponomarev, 2015-11-07
@dajnz

Still, the problem was not with Less, but with me, or rather, that I was processing all the Less files en masse, instead of doing it only for the changed ones.
To solve the problem, the Gulp-plugins gulp-cached and gulp-remember were used, how to use it can be seen here or in the repositories of the plugins themselves on the github.
Style processing speed is now in the region of 170-200 ms, which is more than satisfactory.
As for libsass, yes, I will try that too, but in another project, thanks for the advice.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question