NgModule dan Optimization – 6

by

Salah satu optimization yang perlu dilakukan sebelum aplikasi digunakan dalam production mode adalah mengenai compilation.

Ada dua macam yaitu Ahead of Time (AoT) dan Just in Time (Jit) compilation.

Seperti yang kita pahami, aplikasi Angular terdiri dari html template yang isinya hanya dimengerti oleh Angular.

Just in Time

Kompilasi terjadi pada browser. Jadi dalam aplikasi terdapat Angular compiler yang bertugas melakukan JiT compilation (dan ukuran filenya besar).

Pengunaan Jit, cocok ketika kita melakukan development, karena mempermudah dalam melakukan debug dan updating.

Ahead of Time

Angular akan melakukan kompilasi diawal, dan menghasilkan file yang sudah dimengerti oleh browser, yaitu file javascript dan html. Bukan file template Angular.

Karena sudah dikompilasi, aplikasi tidak akan disertakan Angular compiler. Dengan demikian aplikasi akan lebih kecil.

Penggunaan AoT jika kita sudah akan pindah ke production mode.

Berikut perintah untuk build aplikasi

$ ng build

Perintah ng build akan menulis file ke dalam directory dist/nama-aplikasi. Anda dapat menggantinya di file config angular.json pada property outputPath.

Jika kompilasi berhasil tanpa error, kurang lebih akan ditampilkan log seperti berikut:

PS F:\Project\BukuResep\buku-resep> ng build
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files               | Names         |      Size
main.bc4d747633525e467c42.js      | main          | 257.93 kB
styles.d258abc18dafc1ad4560.css   | styles        | 156.36 kB
polyfills.316c8386d99a1af28b8b.js | polyfills     |  36.20 kB
runtime.87af6d031a5770deb93b.js   | runtime       |   2.79 kB

                                  | Initial Total | 453.29 kB

Lazy Chunk Files                  | Names         |      Size
665.06107f5a9d27018038ac.js       | -             |  38.57 kB
80.52be595c4e937c076fcc.js        | -             |   9.99 kB
641.9627ad8788275d11829c.js       | -             |   5.13 kB
190.d76eff02bcdbb8032b9e.js       | -             |   4.00 kB

Build at: 2022-04-14T09:28:54.560Z - Hash: 50f7a373eed37856abcb - Time: 72396ms

Jika Anda periksa direktori project, file akan di generat di folder dist/nama-aplikasi.

Sampai disini tutorial Membuat Web App Menggunakan Angular – Part 3, sudah selesai. Semoga bermanfaat.

Sharing is caring:

Leave a Comment