Ahmad 'Abe' Baehaki

Full-stack .NET Developer

github twitter linkedin email
Angular CLI: Analisa Webpack Bundle
2017-05-10
1 menit baca

Artikel ini menjelaskan secara singkat tentang cara untuk menganalisa isi dari bundle files yang dihasilkan oleh Webpack pada Angular CLI project.

Yang Dibutuhkan

Angular project yang dibuat menggunakan Angular CLI v1 atau versi lebih tinggi.

Instalasi

Instal webpack-bundle-analyzer pada Angular CLI project.

npm install webpack-bundle-analyzer --save-dev

Analisa Webpack Bundle

  1. Tambahkan "bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json" ke bagian scripts pada file package.json.
   ...
   "scripts": {
     ...
     "bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"
   ...

Perintah ng build --prod --stats-json akan menghasilkan webpack bundle beserta stats.json dan webpack-bundle-analyzer dist/stats.json akan membuat laporan analisa webpack bundle.
2. Jalankan npm run bundle-report untuk menghasilkan laporan analisa webpack bundle.

alt text

Referensi


  Indeks artikel


comments powered by Disqus