6

Вопрос по оптимизации проекта. Использую grunt.js, все скрипты и плагины объединяю и сжимаю в один файл, правильно ли это? Либо нужно подключать отдельно плагины, а все вызовы плагинов и простые скрипты объединять уже в 1 файл?

12
  • если много весить будет уже файл "ядра" скажем так, то лучше и его разбивать на несколько файлов. Просто главное помнить, что каждое подключение файла (стиль, скрипт, изображение) это лишинй коннект к серверу который забирает время.
    – user190134
    11 янв 2017 в 8:16
  • Ну необязательно 1 файл, сколько точек входа столько и бандлов 11 янв 2017 в 8:20
  • Также если как говорит OlmerDale Вы будете использовать современные инструменты (правильно настроенный вебпак и модули), то думать над тем на сколько правильно файлов бить и когда кусочек подгружать - за вас в основном будет инструмент. 11 янв 2017 в 8:22
  • @user190134 в HTTP/2 все файлы передаются в пределах одного соединения, причём одновременно и параллельно
    – andreymal
    11 янв 2017 в 8:24
  • 1
    ну прям уж таки все
    – user190134
    11 янв 2017 в 8:47

1 ответ 1

2

Вы все верно делаете. Конкатенация скриптов и стилей уменьшает количество запросов на сервер, а также конечный размер CSS и JS, что делает загрузку сайтов более быстрой, вследствие чего показатель отказов падает, позиции в поисковой выдаче растут, глубина просмотров растет, а клиент счастлив.

Оптимизация стилей

Кроме обычной минификации стилей можно использовать и продвинутую - объединять дубликаты классов и @media. Пример на gulp из моего web-starter-kit:

var
    gulp = require('gulp'),
    stylus = require('gulp-stylus'),

    // Минифицирует CSS, объединяет классы. Не ломает CSS, в отличие от cssnano, который, к примеру, может неправильно выставлять z-index
    csso = require('gulp-csso'),

    // Объединяет все @media
    cmq = require('gulp-combine-mq'),

    // Сокращает CSS-селекторы    
    gs = require('gulp-selectors'),

    // Проставляет вендорные префиксы
    autoprefixer = require('gulp-autoprefixer'),

    livereload = require('gulp-livereload'),
    nib = require('nib');

// Compiling Stylus in CSS
gulp.task('css', function() {
    gulp.src('./styl/*.styl')
        .pipe(stylus({
            use: nib()
        }))
        .pipe(cmq())
        .pipe(csso())
        .pipe(autoprefixer('last 3 versions'))
        .pipe(gulp.dest('./public/css/'))
        .pipe(livereload())
});

А если совсем делать нечего, то можно еще и селекторы сократить:

// Minify selectors
    gulp.task('gs', function() {
        var ignores = {
            classes: ['active', 'menu', 'nav', 'slide', 'error', 'form-control', 'loader', 'showLoader', 'fadeLoader', 'webp', 'wow', 'owl-*', 'i-*'],
            ids: '*'
        };
        gulp.src(['./public/**/*.css', './public/**/*.html'])
            .pipe(gs.run({}, ignores))
            .pipe(gulp.dest('./public/'))
    });

Кстати, наверняка у вас есть классы, добавляющиеся через JS, поэтому предварительно стоит все такие классы вынести в переменную ignores.

Сжатие графики

Кроме стилей и скриптов также посоветую сжимать и графику. К примеру, картинки можно легко сжать без потери качества только за счет удаление exif-данных. Пример на gulp:

var
    gulp = require('gulp'),
    imagemin = require('gulp-imagemin'),
    imageminJR = require('imagemin-jpeg-recompress'),
    imageminSvgo = require('imagemin-svgo');

// Optimizing images
gulp.task('imagemin', function() {
    gulp.src('./img/**/*')
        .pipe(imagemin([
            imageminJR({
                method: 'ms-ssim'
            }),
            imageminSvgo({
                plugins: [
                    {removeViewBox: false}
                ]
            })
        ]))
        .pipe(gulp.dest('./public/img/'))
});

А для браузеров, которые понимают легковесный формат webp (формат разработан Google), можно сделать еще такой вариант изображений:

var
    gulp = require('gulp'),
    webp = require('gulp-webp');

// Generate Webp
gulp.task('webp', function() {
    gulp.src('./img/**/*')
        .pipe(webp())
        .pipe(gulp.dest('./public/img/'))
});

Кеширование статики на стороне пользователя

Также бы посоветовал кешировать скрипты и стили на стороне пользователя, чтобы исключить их повторную загрузку, если они не изменились:

<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|svg|swf|js|css|pdf|woff2|woff|ttf|eot)$">
  Header set Cache-Control "max-age=2592000"
</FilesMatch>

И включить gzip сжатие на сервере:

# сжатие text, html, javascript, css, xml:
<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>

Преимущества и недостатки CDN

С одной стороны cdn действительно поможет брать контент с кеша пользователя, однако с другой - это создаст дополнительный запрос, если этого контента у пользователя нет. Еще одна проблема может быть в том, что сервер cdn вовсе может не работать и ничего не отдать. Вспомнить хотя бы, как несколько лет назад все сервисы Google перестали работать и тысячи сайтов сломались из-за того, что не могли загрузить шрифты с Google Font.

В будущем, когда HTTP/2 будет достаточно распространен, скрипты можно будет загружать в несколько потоков и конкатенация будет необязательной. Хотя и тогда конечный размер сжатых в один файлов будет эффективней, чем сжатых по отдельности.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.