در مقالات قبلی به طور کامل با گالپ آشنا شدیم و گفتیم که می‌تواند ما را در بهینه سازی ورک فلویمان کمک کند. در این قسمت یاد خواهیم گرفت که چگونه تجربه‌ی کاربری بهتری را از سرعت بارگذاری سایتمان ایجاد کنیم.
افزایش کارآیی Performance وب با گالپ
برای اینکه بفهمیم چه کارهایی می‌تواند سایت یا اپلیکیشن ما را کاراتر کند، از Developer tools با زدن Ctrl+Shifi+I درون گوگل کروم، کار خود را شروع می‌کنیم. به برگه‌ی Audits می‌رویم و دکمه‌ی Run را با تنظیمات پیش فرض می‌زنیم. نتایج آن بعد از اندکی صبر، برای من به صورت شکل زیر است:
ما قصد داریم بدانیم گالپ چه ابزاهایی را برای راه حل‌های داده شده توسط مرورگر دارد؟
۱− کنار هم قرار دادن و فشرده کردن فایل‌های جاوا اسکریپت
npm install --save-dev gulp-uglify gulp-concat
بعد از نصب، فایل gulpfile.js را به صورت زیر ویرایش و تسک js را به آن اضافه می‌کنیم.
// first load all required js files
// concat them in to script.min.js
// and minify it.
gulp.task('js', function() {
return gulp.src([
config.bowerDir + '/jquery/dist/jquery.min.js', // این فایل وابستگی فایل‌های زیر است
config.bowerDir + '/materialize/dist/js/materialize.min.js',
'./resources/js/app.js'
])
.pipe(concat('script.min.js'))
.pipe(uglify())
.pipe(size())
.pipe(gulp.dest('./public/js'));
});
خروجی:
فشرده کردن جاوا اسکریپت، حجم فایل‌ها را ۳۰ تا ۹۰ درصد کاهش می‌دهد.
۲− حذف سکلتور‌های بدون استفاده css
همانگونه که در عکس اول آمده، ۹۳ درصد سلکتور‌ها در این صفحه بلا استفاده هستند! و این یعنی کاهش فوق العاده زیاد حجم فایل فشرده شده css. به طور معمول، توسعه دهندگان ۸۵ درصد حجم فایل css خود را می‌توانند با این کار
کاهش دهند (البته بیشتر این اتفاق هنگام استفاده از فریک ورک‌هایی مانند bootstrap,... می‌افتد) برای این کار از پلاگین
gulp-uncss استفاده می‌کنیم. نصب:
npm install gulp-uncss --save-dev
سپس تسک مربوطه را می‌نویسم:
gulp.task('css', function() {
return sass(config.sassPath + '/style.scss', {
style: 'compressed',
loadPath: [
'./resources/sass',
config.bowerDir + '/materialize/sass'
]
})
.on('error', util.log)
.pipe(size())
.pipe(uncss({
html: ['./index.html', './posts.html']
}))
.pipe(gulp.dest('./public/css'))
.pipe(size())
.pipe(connect.reload());
});
نتیجه:
نتیجه فوق العاده است! ۸۷ درصد کاهش حجم css! اما ممکن است بعضی از استایل‌های شما توسط javascript به صفحه تزریق شوند. در این صورت نباید سکلتور‌های لازم را حذف کرد و آنها را داخل آرایه‌ی ignore قرار می‌دهیم. برای این منظور، تسک بالا را به صورت زیر به روز رسانی می‌کنیم.
gulp.task('css', function() {
return sass(config.sassPath + '/style.scss', {
style: 'compressed',
loadPath: [
'./resources/sass',
config.bowerDir + '/materialize/sass'
]
})
.on('error', util.log)
.pipe(size())
.pipe(uncss({
html: ['./index.html', './posts.html'],
timeout : 2000, // wait for load js files
ignore: [
".waves-ripple ",
".drag-target",
"#sidenav-overlay",
".waves-effect",
".waves-effect .waves-ripple",
".waves-effect.waves-pinck .waves-ripple",
".waves-block.waves-light"
]
}))
.pipe(minifyCss())
.pipe(size())
.pipe(gulp.dest('./public/css'))
.pipe(connect.reload());
});
بعد از اینکار حجم فایل css من کمی افزایش پیدا کرد ولی بعد از فشرده کردن، نهایتا به حدود ۱۴KB رسید و این یعنی ۸۷ درصد کاهش حجم فایل css؛ تنها بعد از حذف سکلتور‌های اضافی و فشرده کردن آنها. می‌توانید
پلاگین‌های بیشتری را در اینجا ببینید و استفاده کنید.
