Почему post css -image-inliner приводит к чрезвычайно медленному построению глотка? - PullRequest
Новая
       47

Почему post css -image-inliner приводит к чрезвычайно медленному построению глотка?

0 голосов
/ 08 апреля 2020

Я обновил свою среду node / gulp до последних версий из-за требований к серверу, которые находятся вне моего контроля. После обновления время сборки значительно увеличилось (17+ минут).

Я пробовал следующие способы устранения неполадок:

  • Использование одного небольшого файла CSS для создания и добавления небольшого импорта за один раз. После каждого сохранения сборка завершается ~ 30 секунд или меньше. Добавление импорта, включающего пути к 4 изображениям в файле s css, и время сборки увеличивается с 30 секунд до ~ 2,5 минут для компиляции и вывода файла размером 53 КБ css.

  • Удаление раздела imageInliner из массива CSSProcessors позволяет завершить сборку менее чем за минуту.

Может кто-нибудь, пожалуйста, сообщите мне, если что-то мне не хватает нужно обновить или как?

Спасибо.

Узел: v13.12.0

Gulp: CLI версия: 2.2.0 Локальная версия: 4.0.2

gulp-post css: 8.0.0

post css -Image-Inliner: 3.0.9

Фрагменты файла Gulp 

const CSSProcessors = [
    autoprefixer,
    imageInliner({
        maxFileSize: 10000,
        assetPaths: ["Feature/*/code/images/**", "Feature/*/code/Assets/**", "Foundation/*/code/images/**"]
    }),
    cssnano({
        discardDuplicates: false
    })
];

function stylesTask() {

    return gulp.src(paths.styles.src)
        .pipe(sourcemaps.init()) // start sourcemap processing
        .pipe(postcss(preCompileCSSProcessors, { syntax: postcssScss }))
        .on("error", errorHandler) // if there are errors during postcss, call errorHandler  
        .pipe(sass())
        .on("error", errorHandler) // if there are errors during sass, call errorHandler  
        .pipe(postcss(CSSProcessors))
        .pipe(rename(function (pathName) {
            pathName.extname = ".min.css"
            pathName.dirname = pathName.dirname.replace("\\code\\Styles", "");
        }))
        .pipe(gulp.dest(paths.styles.dest));
}
...