Visualisator Ukuran Bundle Webpack

Tempelkan JSON statistik webpack (dihasilkan dengan webpack --json) dan langsung lihat modul serta paket mana yang paling menyumbang ukuran bundle Anda. Beralih antara tampilan paket, modul, dan chunk. Dapatkan rekomendasi optimasi yang bisa langsung diterapkan untuk dependensi terbesar. Semua analisis berjalan di browser Anda - file statistik Anda tidak pernah meninggalkan perangkat Anda. Tanpa pendaftaran.

Webpack Bundle Size Visualizer

Paste a webpack stats JSON (generated with webpack --json) and visualize module sizes - see which dependencies contribute most to your bundle. All analysis runs locally in your browser. Your stats file never leaves your device.

Webpack Stats JSONUpload stats.json

{
  "version": "5.88.0",
  "hash": "a1b2c3d4e5f6",
  "outputPath": "/dist",
  "chunks": [
    {
      "id": 0,
      "names": [
        "main"
      ],
      "size": 245000
    },
    {
      "id": 1,
      "names": [
        "vendor"
      ],
      "size": 890000
    },
    {
      "id": 2,
      "names": [
        "runtime"
      ],
      "size": 12000
    }
  ],
  "modules": [
    {
      "name": "./node_modules/react/index.js",
      "size": 6800
    },
    {
      "name": "./node_modules/react-dom/index.js",
      "size": 130000
    },
    {
      "name": "./node_modules/react-dom/cjs/react-dom.development.js",
      "size": 890000
    },
    {
      "name": "./node_modules/lodash/lodash.js",
      "size": 71000
    },
    {
      "name": "./node_modules/moment/moment.js",
      "size": 290000
    },
    {
      "name": "./node_modules/axios/lib/axios.js",
      "size": 13000
    },
    {
      "name": "./node_modules/axios/lib/core/Axios.js",
      "size": 4200
    },
    {
      "name": "./node_modules/@mui/material/Button/Button.js",
      "size": 18000
    },
    {
      "name": "./node_modules/@mui/material/TextField/TextField.js",
      "size": 22000
    },
    {
      "name": "./node_modules/@mui/material/Dialog/Dialog.js",
      "size": 15000
    },
    {
      "name": "./node_modules/@emotion/react/dist/emotion-react.cjs.dev.js",
      "size": 45000
    },
    {
      "name": "./node_modules/@emotion/styled/dist/emotion-styled.cjs.dev.js",
      "size": 28000
    },
    {
      "name": "./node_modules/date-fns/index.js",
      "size": 12000
    },
    {
      "name": "./node_modules/date-fns/format.js",
      "size": 8500
    },
    {
      "name": "./node_modules/date-fns/parseISO.js",
      "size": 3200
    },
    {
      "name": "./node_modules/chart.js/dist/chart.js",
      "size": 185000
    },
    {
      "name": "./node_modules/d3/dist/d3.node.js",
      "size": 520000
    },
    {
      "name": "./node_modules/highlight.js/lib/core.js",
      "size": 32000
    },
    {
      "name": "./node_modules/highlight.js/lib/languages/javascript.js",
      "size": 18000
    },
    {
      "name": "./node_modules/highlight.js/lib/languages/typescript.js",
      "size": 12000
    },
    {
      "name": "./src/components/App.tsx",
      "size": 4500
    },
    {
      "name": "./src/components/Header.tsx",
      "size": 2800
    },
    {
      "name": "./src/components/Dashboard.tsx",
      "size": 8900
    },
    {
      "name": "./src/components/UserList.tsx",
      "size": 5600
    },
    {
      "name": "./src/utils/api.ts",
      "size": 3200
    },
    {
      "name": "./src/utils/helpers.ts",
      "size": 1800
    },
    {
      "name": "./src/store/index.ts",
      "size": 2100
    },
    {
      "name": "./src/pages/Home.tsx",
      "size": 6700
    },
    {
      "name": "./src/pages/Settings.tsx",
      "size": 4300
    }
  ]
}

Generate with: webpack --json > stats.json or next build --debug

Mengapa menggunakan visualisator ukuran bundle Webpack kami?

Visualisasi bundle Webpack instan: visualisasikan ukuran bundle webpack secara instan di browser - tanpa unggah ke server dan tanpa alat build. Visualisator ukuran bundle webpack kami mengurai JSON statistik Anda dan menampilkan batang ukuran interaktif untuk paket, modul, dan chunk.
Visualisator ukuran bundle Webpack online yang aman: JSON statistik webpack Anda tidak pernah meninggalkan perangkat Anda saat memakai visualisator ini. Pemrosesan 100 % di sisi klien berarti privasi penuh - tanpa penyimpanan cloud, tanpa log server, dan tanpa pemaparan kode sumber.
Visualisator ukuran bundle Webpack tanpa instalasi: visualisasikan ukuran bundle webpack langsung di browser tanpa paket npm, tanpa menyiapkan webpack-bundle-analyzer, dan tanpa akun. Visualisator ukuran bundle webpack gratis ini berfungsi di browser modern mana pun.
Rekomendasi optimasi dan analisis paket: dapatkan rekomendasi optimasi yang bisa langsung diterapkan untuk dependensi utama Anda - moment.js, lodash, d3, MUI, chart.js, dan lainnya. Lihat komposisi bundle (node_modules versus kode aplikasi) serta kontribusi ukuran setiap paket.

Kasus penggunaan umum visualisator ukuran bundle Webpack

Pemenuhan anggaran ukuran bundle: gunakan visualisator ukuran bundle webpack untuk memeriksa apakah bundle Anda masih dalam anggaran performa sebelum setiap deploy. Lihat paket mana yang paling besar kontribusinya dan kenali regresi lebih awal.
Audit dan penggantian dependensi: gunakan visualisator ukuran bundle webpack untuk mengenali dependensi yang kelebihan ukuran seperti moment.js (290 KB) atau lodash (71 KB). Panel rekomendasi optimasi menyarankan alternatif yang lebih ringan untuk kasus yang paling umum.
Verifikasi tree-shaking: gunakan visualisator ukuran bundle webpack untuk memverifikasi bahwa tree-shaking bekerja dengan benar. Jika sebuah paket menampilkan banyak modul kecil alih-alih satu bundle besar, tree-shaking aktif dan bekerja sesuai harapan.
Optimasi Core Web Vitals: gunakan visualisator ukuran bundle webpack untuk mengenali bundle JavaScript terbesar yang memengaruhi skor LCP dan FID Anda. Mengurangi ukuran bundle utama secara langsung memperbaiki Time to Interactive dan First Input Delay.
Laporan performa untuk klien: gunakan visualisator ukuran bundle webpack untuk menghasilkan data komposisi bundle bagi laporan performa klien. Tunjukkan pemisahan node_modules versus kode aplikasi, paket teratas berdasarkan ukuran, dan peluang optimasi yang spesifik.
Analisis pemecahan kode: gunakan visualisator ukuran bundle webpack untuk menganalisis ukuran chunk dan mengenali peluang code splitting. Tampilan chunk menunjukkan chunk mana yang terbesar dan berapa banyak modul di dalam masing-masing chunk.

Apa itu visualisator ukuran bundle Webpack?

Visualisator ukuran bundle webpack mengurai keluaran JSON dari API stats webpack dan menampilkan rincian visual tentang modul serta paket yang paling menyumbang ukuran bundle Anda. Visualisator ukuran bundle webpack kami membaca array modules, chunks, dan assets dari JSON statistik webpack dan menggabungkan ukuran modul per nama paket - menunjukkan dengan tepat dependensi node_modules mana yang terbesar. Semua analisis berjalan sepenuhnya di browser Anda memakai JavaScript murni - tanpa unggah ke server dan tanpa memasang webpack-bundle-analyzer.

Cara kerja visualisator ukuran bundle Webpack kami

1 Hasilkan JSON statistik webpack Anda: jalankan webpack --json > stats.json atau next build --debug . Lalu tempelkan isi stats.json ke area masukan, atau unggah filenya langsung.
2 Analisis instan di browser: klik «Visualisasikan Bundle» dan visualisator ukuran bundle webpack mengurai JSON, menggabungkan ukuran modul per nama paket, lalu menampilkan batang ukuran untuk paket, modul, dan chunk. Tidak ada data yang dikirim ke server mana pun.
3 Tinjau visualisasi dan rekomendasinya: beralih antara tampilan paket, modul, dan chunk. Panel rekomendasi optimasi memberikan saran spesifik untuk dependensi terbesar pada bundle Anda.

Apa yang ditampilkan visualisator ukuran bundle Webpack

Komposisi bundle: batang visual yang menunjukkan pemisahan antara node_modules (dependensi pihak ketiga) dan kode aplikasi - sebagian besar bundle 70-90 % berupa node_modules, yang menjadi sasaran optimasi utama.
Tampilan paket: semua paket node_modules digabung per nama dan diurutkan berdasarkan ukuran total - menunjukkan dependensi mana yang paling menyumbang bundle Anda.
Tampilan modul: 20 modul individual terbesar berdasarkan ukuran - berguna untuk mengenali file spesifik yang ternyata besar.
Tampilan chunk: semua chunk webpack diurutkan berdasarkan ukuran - berguna untuk mengenali peluang code splitting dan memahami struktur bundle Anda.

Cara menghasilkan JSON statistik Webpack

Untuk webpack: jalankan webpack --json > stats.json atau tambahkan {" "} ke konfigurasi webpack Anda. Untuk Next.js: jalankan next build --debug dan cari file statistik di .next/. Untuk Create React App: gunakan source-map-explorer atau eject untuk mengakses konfigurasi webpack. Visualisator ukuran bundle webpack menerima JSON statistik webpack apa pun - formatnya konsisten antara webpack 4 dan webpack 5.

Pertanyaan yang Sering Diajukan

Visualisator ukuran bundle webpack mengurai JSON statistik webpack dan menampilkan rincian visual tentang modul serta paket yang paling menyumbang ukuran bundle Anda. Visualisator ukuran bundle webpack gratis kami bekerja sepenuhnya di browser Anda.

Jalankan «webpack --json > stats.json» di direktori proyek Anda. Untuk Next.js, jalankan «next build --debug». Visualisator ukuran bundle webpack menerima JSON statistik dari webpack 4 dan webpack 5.

Tentu saja. Visualisator ukuran bundle webpack memproses semuanya secara lokal di browser Anda. JSON statistik Anda tidak pernah diunggah ke server mana pun dan tidak pernah meninggalkan perangkat Anda.

Ya - 100 % gratis, selamanya. Tanpa pendaftaran, tanpa akun, tanpa paket premium, tanpa batas ukuran file, dan tanpa iklan.

Ukuran modul adalah ukuran tanpa kompresi dari satu modul JavaScript. Ukuran chunk adalah ukuran gabungan semua modul dalam satu file keluaran webpack. Visualisator ukuran bundle webpack menampilkan kedua tampilan tersebut.

Sebagian besar bundle JavaScript terdiri dari 70-90 % node_modules. Ini normal. Visualisator ukuran bundle webpack membantu Anda mengenali paket spesifik mana yang terbesar agar bisa memprioritaskan optimasi.

moment.js (ganti dengan date-fns), lodash (pakai tree-shaking), d3 (impor subpaket), MUI (pakai impor bernama), dan chart.js (daftarkan hanya jenis grafik yang dibutuhkan). Visualisator memberi rekomendasi spesifik.

Tidak - visualisator ukuran bundle webpack menampilkan ukuran modul tanpa kompresi seperti yang dilaporkan webpack. Ukuran transfer sebenarnya akan lebih kecil dengan GZIP (biasanya pengurangan 60-80 % untuk JavaScript).

Ya - visualisator ukuran bundle webpack mendukung format JSON statistik webpack 4 maupun webpack 5. Struktur data modul dan chunk konsisten di kedua versi.