Grunt.js – sposoby optymalizacji plików JavaScript w web aplikacjach
Czas czytania:
Automatyzacja naszej pracy pomaga realizować projekty szybciej i sprawia, że programowanie staje się jeszcze bardziej przyjemne. W pracy Front-End Developer’a jest wiele czynności, które można poddać takiemu zabiegowi (np. łączenie i minimalizacja plików js oraz css, kompilacja plików pre-procesorów CSS, optymalizacja grafiki, generowanie Sprite CSS, Sprite SVG i wiele, wiele innych). Z pomocą w tej kwestii przychodzi Grunt.js.
Instalacja
- Node.js
Do działania Grunt.js wymagany jest serwer Node.js. Należy go prostu pobrać i zainstalować z tej strony. - Grunt-CLI (Grunt’s Command Line Iterface)Otwieramy systemowy terminal (dla Windows powinien być uruchomiony z uprawnieniami administratora, natomiast dla systemów UNIX’owych przed poniższą komendą należy dodać „sudo”) i wpisujemy:
npm install -g grunt-cli
W celu sprawdzenia poprawności instalacji można wpisać polecenie:
grunt --version
W tym momencie mamy przygotowane środowisko do obsługi Grunt.js. Jest to procedura jednorazowa.
Konfiguracja projektu
W katalogu z projektem, w którym chcemy używać Grunt.js należy utworzyć plik package.json oraz Grunfile.js. Poniżej przedstawiona jest przykładowa struktura plików oraz konfiguracja Grunt.js w celu łączenia oraz minimalizowania plików js w projekcie. W sekcji „Materiały dodatkowe” zamieszczam linki do artykułów szerzej omawiających konfigurację w.w. plików.
struktura plików
root
|-- Gruntfile.js
|-- index.html
|-- js |
|-- lib |
| |-- lib-1.js |
| |-- lib-2.js |
| |-- lib-3.js |
| |-- lib-4.js |
| |-- lib-5.js |
| `-- lib-6.js |
|-- main.js |
|-- modules |
| |-- module-1.js
| | `-- module-2.js
`-- package.json
Powyższa struktura plików oprócz plików Gruntfile.js oraz package.json zawiera także plik index.html oraz pliki js, które są poddawane optymalizacji.
package.json
{
"name": "Test",
"version": "0.1.0",
"author": "Artur",
"private": true,
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-concat": "^0.5.0",
"grunt-contrib-uglify": "^0.5.1",
"grunt-contrib-watch": "~0.6.1"
}
}
„devDependencies” zawiera deklarację Grunt.js oraz listę pluginów do instalacji:
- grunt-contrib-concat – łączenie plików ze sobą,
- grunt-contrib-uglify – minimalizacja plików .js,
- grunt-contrib-watch – obserwowanie wybranych plików i wykonywanie określonych działań w przypadku wykrycia zajścia w nich zmian.
Mając gotowy plik package.json można przystąpić do instalacji wszystkich zależności w nim zadeklarowanych. W tym celu należy w wierszu poleceń, będąc w katalogu zawierającym omawiany plik, wykonać komendę:
npm install
Gruntfile.js
module.exports = function(grunt){ 'use strict'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // Concat concat: { scripts: { src: [ 'js/lib/lib-1.js', 'js/lib/lib-2.js', 'js/lib/lib-3.js', 'js/lib/lib-4.js', 'js/lib/lib-5.js', 'js/lib/lib-6.js', 'js/main.js' ], dest: 'js/minified/scripts.js', } }, // Uglify uglify: { options: { preserveComments: 'some' }, scripts: { files: { 'js/minified/scripts.min.js': ['js/minified/scripts.js'] } }, modules: { expand: true, // Enable dynamic expansion. cwd: 'js/modules', // Src matches are relative to this path. src: ['**/*.js'], // Actual pattern(s) to match. dest: 'js/minified', // Destination path prefix. ext: '.min.js', // Dest filepaths will have this extension. extDot: 'first' // Extensions in filenames begin after the first dot } }, // Watch watch: { js: { files: ['js/*.js', 'js/modules/*.js'], tasks: ['concat', 'uglify'] } } }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.registerTask('default', ['concat', 'uglify', 'watch']); };
W pliku Grunfile.js zawarta jest cała konfiguracja działania poszczególnych pluginów:
- Concat (grunt-contrib-concat) Pliki: lib-1.js, lib-2.js, lib-3.js, lib-4.js, lib-5.js, lib-6.js, main.js. łączone są w jeden wynikowy plik scripts.js. W tym przypadku ważna jest ich kolejność deklaracji, żeby pliki pluginów były przed plikami je wywołującymi. Dzięki zabiegowi łączenia, z 7 zapytań do serwera otrzymujemy tylko zapytanie o 1 plik, zyskując na czasie ładowania strony.
- Uglify (grunt-contrib-uglify) Task „concat” jest podzielony na dwa pod zadania: – „scripts” Zawartość utworzonego przez poprzedni plugin pliku scripts.js zostaje skompresowana i zapisana do pliku scripts.min.js. Dzięki temu otrzymujemy plik o mniejszym rozmiarze, a zatem również zyskujemy na czasie ładowania strony. – „modules” W bardzo rozbudowanych projektach warto odseparować js dedykowany wyłącznie dla danej części aplikacji, żeby niepotrzebnie nie zwiększały znacznie rozmiaru pliku, w którym i tak nie zostanie wykorzystany. Pliki z katalogu „modules” są automatycznie minimalizowane i zamieniane na plik z końcówką „.min.js”.
Opcja:preserveComments: 'some'
nakazuje podczas kompresji zachowanie komentarzy zaczynających się od ! lub zawierających w swojej treści dyrektywy
@preserve
@license
@cc_on.
Dzięki temu nie zostają usunięte informacje o autorze i licencji pluginów. Więcej opcji znajduje się na stronie pluginu. - Watch (grunt-contrib-watch)Jeżeli zostanie wykonana jakakolwiek zmiana w plikach js w wybranych lokalizacjach, zostanie uruchomiony task „concat”, a następnie „uglify”. Dzięki temu nie trzeba za każdym razem uruchamiać ręcznie grunt’a.
Gdy plik jest gotowy, całość uruchamiana jest za pomocą komendy:
grunt
Wynikowa struktura plików wygląda następująco:
root
|-- Gruntfile.js
|-- index.html
|-- js
| |-- lib
| | |-- lib-1.js
| | |-- lib-2.js
| | |-- lib-3.js
| | |-- lib-4.js
| | |-- lib-5.js
| | `-- lib-6.js
| |-- main.js
| |-- minified
| | |-- module-1.min.js
| | |-- module-2.min.js
| | |-- scripts.js
| | `-- scripts.min.js
| |-- modules
| | |-- module-1.js
| | `-- module-2.js
|-- node_modules
| |-- grunt
| |-- grunt-contrib-concat
| |-- grunt-contrib-uglify
| `-- grunt-contrib-watch
`-- package.json
Dodany został katalog node_modules z zainstalowanym Grunt.js i pluginami oraz katalog minified ze zoptymalizowanymi plikami js.
Wyniki optymalizacji
Przed
Czas ładowania strony: 251ms.
Po
Czas ładowania strony: 135ms.
Podsumowanie
Optymalizacja plików javascript ma bardzo duży wpływ na szybkość ładowania strony. Już przy połączeniu 7 plików w 1 i kompresji, czas ładowania strony zmniejszył się praktycznie dwukrotnie. Manualna optymalizacja jest bardziej uciążliwa, szczególnie przy pracy w zespole przy dużym projekcie. Jednakże z pomocą przychodzi Grunt.js, dzięki któremu wszystko przebiega szybko, sprawnie i automatycznie.
Materiały dodatkowe
Grunt.js
Grunt.js – Getting started
grunt-contrib-concat
grunt-contrib-uglify
grunt-contrib-watch
Zainteresował Cię ten artykuł?
Może Cię również zainteresować:
5 rzeczy, na które warto zwrócić uwagę, wybierając dedykowany system klasy ERP, WMS lub LMS
Tworzenie dedykowanych aplikacji web’owych (dostępnych przez przeglądarkę WWW z poziomu komputera, tabletu czy telefonu) jest… Read More
Warsztaty Discovery – 5 powodów dla których warto je przeprowadzić
Post pochodzi bezpośrednio z naszych oficjalnych kanałów na Social Media. W dynamicznym… Read More
Optymalizacja eCommerce vs. Zewnętrzny Dyrektor Technologiczny
🛠️ Studium przypadku 🛠️Post pochodzi bezpośrednio z naszych oficjalnych kanałów na Social… Read More