Вопрос по оптимизации проекта. Использую grunt.js, все скрипты и плагины объединяю и сжимаю в один файл, правильно ли это? Либо нужно подключать отдельно плагины, а все вызовы плагинов и простые скрипты объединять уже в 1 файл?
-
если много весить будет уже файл "ядра" скажем так, то лучше и его разбивать на несколько файлов. Просто главное помнить, что каждое подключение файла (стиль, скрипт, изображение) это лишинй коннект к серверу который забирает время.– user19013411 янв 2017 в 8:16
-
Ну необязательно 1 файл, сколько точек входа столько и бандлов– Утка Учится Укрываться11 янв 2017 в 8:20
-
Также если как говорит OlmerDale Вы будете использовать современные инструменты (правильно настроенный вебпак и модули), то думать над тем на сколько правильно файлов бить и когда кусочек подгружать - за вас в основном будет инструмент.– Утка Учится Укрываться11 янв 2017 в 8:22
-
@user190134 в HTTP/2 все файлы передаются в пределах одного соединения, причём одновременно и параллельно– andreymal11 янв 2017 в 8:24
-
1ну прям уж таки все– user19013411 янв 2017 в 8:47
1 ответ
Вы все верно делаете. Конкатенация скриптов и стилей уменьшает количество запросов на сервер, а также конечный размер 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
будет достаточно распространен, скрипты можно будет загружать в несколько потоков и конкатенация будет необязательной. Хотя и тогда конечный размер сжатых в один файлов будет эффективней, чем сжатых по отдельности.