Vite: Pembunuh Webpack atau Yang Lain?

Apa itu Vite?

Vite adalah alat pembangunan dan server pengembangan untuk aplikasi JavaScript modern. Hal ini bertujuan untuk memberikan pengalaman pengembangan yang lebih cepat dan efisien bagi pengembang dengan menggunakan fitur modul ES asli di browser.

Vite menggunakan fitur modul ES asli di browser untuk menangani impor file JavaScript Anda, yang memungkinkan pembangunan pengembangan lebih cepatdan penggantian modul panas. Artinya, Anda dapat melihat perubahan di browser secara instan tanpa harus menunggu hingga proses pembuatan lengkap selesai. Vite juga memiliki sistem plugin yang memungkinkan Anda menambahkan fungsionalitas tambahan, seperti dukungan TypeScript atau transpilasi JSX.

Salah satu fitur utama Vite adalah kemampuannya untuk menangani proyek JavaScript besar dengan mudah. Tidak seperti alat pembangunan lainnya, Vite tidak memerlukan file konfigurasi, yang dapat menghemat banyak waktu dan kerumitan pengembang. Sebaliknya, ia menggunakan konvensi dan default yang masuk akal untuk menangani proses pembangunan, yang memungkinkan pengembang untuk fokus pada penulisan kode daripada mengkonfigurasi proses pembangunan.

Aspek penting lainnya dari Vite adalah kemudahan penggunaannya. Ini dirancang agar mudah disiapkan dan digunakan, serta memiliki antarmuka baris perintah sederhana yang membuatnya mudah digunakan oleh pengembang dengan semua tingkat keahlian. Selain itu, Vite memiliki server pengembangan bawaan yang secara otomatis memuat ulang browser saat Anda membuat perubahan pada kode, sehingga membuat proses pengembangan menjadi lebih efisien.

Vite juga memiliki dokumentasi yang sangat bagus, yang memudahkan pengembang mempelajari cara menggunakannya dan memecahkan masalah apa pun yang mungkin timbul. Dokumentasinya jelas, ringkas, dan mudah dipahami, serta mencakup berbagai contoh dan tutorial untuk membantu pengembang memulai dengan cepat.

Masalah

Sebelum modul ES tersedia di browser, pengembang harus bergantung pada alat eksternal untuk menulis kode JavaScript termodulasi. Hal ini mengarah pada pengembangan alat “bundling” seperti webpack, Rollup, dan Parcel, yang meningkatkan pengalaman pengembangan frontend.

Namun, seiring dengan semakin kompleks dan besar aplikasi, jumlah kode JavaScript juga meningkat, sehingga menyebabkan hambatan kinerja pada alat ini. Waktu tunggu yang lama untuk menjalankan server pengembangan dan putaran masukan yang lambat dapat sangat memengaruhi produktivitas dan kepuasan pengembang. Vite mengatasi masalah ini dengan memanfaatkan dukungan asli untuk modul ES di browser dan memanfaatkan kemajuan dalam alat JavaScript yang ditulis dalam bahasa yang dapat dikompilasi ke kode asli. Hal ini memungkinkan pembuatan pengembangan lebih cepat dan penggantian modul terbaru, sehingga meningkatkan pengalaman pengembangan secara keseluruhan.

-> Server Lambat Mulai

Saat memulai server dev secara cold-start, penyiapan build berbasis bundler harus merayapi dan membangun seluruh aplikasi Anda dengan penuh semangat sebelum dapat disajikan.

Vite meningkatkan waktu mulai server dev dengan terlebih dahulu membagi modul dalam aplikasi menjadi dua kategori: dependensi dan kode sumber.

Dependensi sebagian besar berupa JavaScript biasa yang tidak sering berubah selama pengembangan. Beberapa dependensi besar (misalnya pustaka komponen dengan ratusan modul) juga cukup mahal untuk diproses. Dependensi juga dapat dikirimkan dalam berbagai format modul (misalnya ESM atau CommonJS).
Vite pre-bundel dependensi menggunakan esbuild. esbuild ditulis dalam Go dan dependensi pra-bundel 10–100x lebih cepat dibandingkan bundler berbasis JavaScript.
Kode sumber sering kali berisi JavaScript non-biasa yang perlu diubah (misalnya komponen JSX, CSS, atau Vue/Svelte), dan akan sangat sering diedit. Selain itu, tidak semua kode sumber perlu dimuat pada waktu yang sama (misalnya dengan pemisahan kode berbasis rute).
Vite menyajikan kode sumber melalui ESM asli. Hal ini pada dasarnya membiarkan browser mengambil alih sebagian pekerjaan bundler: Vite hanya perlu mengubah dan menyajikan kode sumber sesuai permintaan, sesuai permintaan browser . Kode di balik impor dinamis bersyarat hanya diproses jika benar-benar digunakan pada layar saat ini.

-> Pembaruan Lambat

Saat file diedit dalam penyiapan build berbasis bundler, membangun kembali seluruh paket menjadi tidak efisien karena alasan yang jelas: kecepatan pembaruan akan menurun secara linier seiring dengan ukuran aplikasi.

Pada beberapa bundler, server pengembang menjalankan bundling di memori sehingga server tersebut hanya perlu membuat sebagian grafik modulnya tidak valid saat file berubah, namun masih perlu membuat ulang seluruh bundel dan memuat ulang halaman web. Merekonstruksi paket bisa memakan biaya yang besar, dan memuat ulang laman akan merusak status aplikasi saat ini. Inilah sebabnya beberapa bundler mendukung Hot Module Replacement (HMR): memungkinkan modul untuk melakukan “hot replace” sendiri tanpa memengaruhi halaman lainnya. Hal ini sangat meningkatkan DX — namun, dalam praktiknya kami menemukan bahwa kecepatan pembaruan HMR pun menurun secara signifikan seiring dengan bertambahnya ukuran aplikasi.

Di Vite, HMR dilakukan melalui ESM asli. Saat file diedit, Vite hanya perlu secara tepat membatalkan validasi rantai antara modul yang diedit dan batas HMR terdekatnya (seringkali hanya modul itu sendiri), membuat pembaruan HMR cepat secara konsisten terlepas dari ukuran aplikasi Anda.

Vite juga memanfaatkan header HTTP untuk mempercepat pemuatan ulang halaman penuh (sekali lagi, biarkan browser melakukan lebih banyak pekerjaan untuk kita): permintaan modul kode sumber dibuat bersyarat melalui 304 Not Modified, dan permintaan modul ketergantungan di-cache dengan kuat melalui Cache-Control: max-age=31536000,immutable sehingga tidak mencapai tujuan. server lagi setelah di-cache.

Setelah Anda merasakan seberapa cepat Vite, saya sangat ragu Anda akan bersedia untuk menerima pengembangan paket lagi.

Penggunaan dasar Vite

Berikut ini contoh cara menggunakan Vite untuk menyiapkan proyek JavaScript sederhana:

Pertama, Anda perlu menginstal Vite di mesin Anda dengan menjalankan perintah berikut:

# npm
npm create vite@latest

# yarn
yarn create vite

# pnpm
pnpm create vite

2. Inisialisasi proyek baru dengan menjalankan:

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

3. Sekarang Anda dapat memulai server pengembangan dengan menjalankan perintah berikut:

vite

4. Ini akan membuat file index.html baru di direktori proyek Anda dan membukanya di browser default Anda. Server pengembangan juga akan berjalan pada http://localhost:3000

5. Anda dapat mulai menulis kode JavaScript Anda di folder src, dan Vite akan menangani impor dan secara otomatis memuat ulang browser saat Anda membuat perubahan pada kode Anda.

Itu dia! Anda sekarang memiliki lingkungan pengembangan kerja yang diatur dengan Vite. Anda dapat menambahkan lebih banyak file ke proyek Anda dan menggunakan fitur JavaScript modern tanpa konfigurasi apa pun.

Catatan: Vite juga memiliki banyak opsi dan plugin yang dapat Anda gunakan untuk menyesuaikan lingkungan pengembangan Anda dan menambahkan lebih banyak fungsi, tetapi ini adalah penggunaan dasarnya.

Konfigurasi

Vite tidak memerlukan file konfigurasi secara default, melainkan menggunakan konvensi dan default yang masuk akal untuk menangani proses pembangunan. Namun, Anda dapat membuat file vite.config.js di root proyek Anda untuk menyesuaikan perilaku Vite. Berikut adalah contoh file vite.config.js dasar:

module.exports = {
  // Enable the esbuild plugin, which will transpile modern JavaScript to compatible with older browsers
  esbuild: {
    minify: true,
    target: 'es5'
  },
  // Enable the TypeScript plugin
  plugins: [
    require('vite-plugin-typescript')
  ]
}

File konfigurasi ini mengaktifkan plugin esbuild, yang akan memperkecil dan mentranspilasi JavaScript modern ke ES5 sehingga kompatibel dengan browser lama, dan juga mengaktifkan plugin TypeScript.

Anda juga dapat menambahkan opsi lain seperti direktori akar proyek Anda, setelan proxy, alias, atau menentukan middleware khusus.

module.exports = {
  alias: {
    '@': '/src',
  },
  plugins: [
    'vite-plugin-typescript',
  ],
};

Dalam contoh ini, saya menggunakan opsi alias untuk mengonfigurasi Vite agar mengenali simbol @ sebagai alias untuk folder src. Hal ini memungkinkan Anda menggunakan impor yang lebih pendek, seperti import { foo } from '@/bar', bukan import { foo } from './src/bar'.

Selain itu, saya menggunakan opsi plugins untuk mengonfigurasi Vite agar menggunakan plugin vite-plugin-typescript, yang memungkinkan Vite mentranspile kode TypeScript. Untuk menggunakannya, Anda perlu menginstalnya terlebih dahulu dengan menjalankan npm install vite-plugin-typescript.

Ada opsi lain yang dapat Anda gunakan untuk mengkonfigurasi Vite, seperti root, port, assetsDir, outDir dan lainnya, Anda dapat memeriksa dokumentasi resmi untuk detail lebih lanjut https://vitejs.com/docs/config.

Perlu dicatat bahwa meskipun Anda dapat menggunakan file konfigurasi, Vite dimaksudkan agar sederhana, fleksibel, dan cepat untuk proyek kecil-menengah, namun tidak cocok untuk aplikasi monolitik besar yang memerlukan proses pembangunan dan konfigurasi yang lebih kompleks.

import { defineConfig, loadEnv } from 'vite';
import path from 'path';
import { createVuePlugin } from 'vite-plugin-vue2';
import envCompatible from 'vite-plugin-env-compatible';
import { injectHtml } from 'vite-plugin-html';
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const { OUTPUT_DIR, VITE_PORT } = loadEnv(mode, process.cwd(), '');

  return {
    resolve: {
      alias: [
        {
          find: /^~/,
          replacement: '',
        },
        {
          find: '@',
          replacement: path.resolve(__dirname, 'src'),
        },
        {
          find: '@trendyol/sc-ui-kit',
          replacement: path.resolve(__dirname, 'node_modules/@trendyol/sc-ui-kit/dist'),
        },
      ],
      extensions: [
        '.mjs',
        '.js',
        '.ts',
        '.jsx',
        '.tsx',
        '.json',
        '.vue',
      ],
    },
    plugins: [
      createVuePlugin({ jsx: true }),
      viteCommonjs(),
      envCompatible(),
      injectHtml(),
    ],
    css: {
      devSourcemap: false,
      preprocessorOptions: {
        sass: {
          prependData: '@import "@/styles";',
          quietDeps: true,
        },
        scss: {
          additionalData: '@import "@/styles";',
          quietDeps: true,
        },
      },
    },
    test: {
      globals: true,
    },
    server: {
      strictPort: false,
      port: VITE_PORT,
    },
    build: {
      sourcemap: true,
      outDir: OUTPUT_DIR,
    },
  };
});

Contoh konfigurasi Vite dari proyek saya di Trendyol

Mengapa kita harus menggunakan Vite?

Vite memiliki beberapa keunggulan:

Pembangunan pengembangan cepat: Vite menggunakan fitur modul ES asli di browser untuk menangani impor, yang memungkinkan pembangunan pengembangan lebih cepat dan penggantian modul panas. Artinya, Anda dapat melihat perubahan di browser secara instan tanpa harus menunggu hingga proses pembuatan lengkap selesai.
Tidak diperlukan konfigurasi: Vite tidak memerlukan file konfigurasi, yang dapat menghemat banyak waktu dan kerumitan pengembang. Sebaliknya, ia menggunakan konvensi dan default yang masuk akal untuk menangani proses pembangunan, yang memungkinkan pengembang untuk fokus pada penulisan kode daripada mengkonfigurasi proses pembangunan.
Mudah digunakan: Vite dirancang agar mudah disiapkan dan digunakan, serta memiliki antarmuka baris perintah sederhana yang membuatnya mudah digunakan oleh pengembang dari semua tingkat keahlian.
Server pengembangan bawaan: Vite memiliki server pengembangan bawaan yang secara otomatis memuat ulang browser saat Anda membuat perubahan pada kode, sehingga membuat proses pengembangan menjadi lebih efisien.
Dokumentasi yang sangat bagus: Vite memiliki dokumentasi yang sangat baik, yang memudahkan pengembang mempelajari cara menggunakannya dan memecahkan masalah apa pun yang mungkin timbul.

Di sisi lain, Vite juga memiliki beberapa kelemahan:

Dukungan browser terbatas: Vite mengandalkan fitur modul ES asli di browser, yang belum sepenuhnya didukung oleh semua browser. Artinya, beberapa pengguna mungkin tidak dapat menggunakan aplikasi Anda jika mereka menggunakan browser lama.
Ekosistem plugin terbatas: Vite memiliki ekosistem plugin yang relatif terbatas dibandingkan dengan alat build lainnya, yang berarti Vite mungkin tidak memiliki semua fitur atau fungsi yang dibutuhkan beberapa pengembang.
Fitur build produksi terbatas: Vite terutama berfokus pada build pengembangan dan mungkin tidak memiliki banyak fitur untuk build produksi seperti alat build lainnya.
Tidak diadopsi secara luas: Vite adalah alat pembangunan yang relatif baru dan mungkin tidak diadopsi secara luas oleh komunitas seperti alat pembangunan lain yang lebih mapan, sehingga dapat mempersulit pencarian bantuan atau sumber daya.
Tidak cocok untuk aplikasi monolitik besar: Vite didesain sederhana dan cepat, sehingga mungkin bukan pilihan terbaik untuk aplikasi monolitik besar yang memerlukan proses pembangunan lebih kompleks.

Perbandingan dengan yang lain

Vite adalah alat pembangunan yang relatif baru dan berbeda dari alat pembangunan lain yang lebih mapan seperti webpack atau Parcel dalam beberapa hal:

Vite menggunakan fitur modul ES asli di browser untuk menangani impor, sementara webpack dan Parcel menggunakan pendekatan yang lebih tradisional dalam menggabungkan semua file menjadi satu. Hal ini memungkinkanpembangunan pengembangan yang lebih cepat dan penggantian modul panas dengan Vite.
Vite tidak memerlukan file konfigurasi, sehingga lebih mudah diatur dan digunakan dibandingkan webpack atau Parcel.
Vite memiliki ekosistem plugin yang terbatas dibandingkan dengan webpack atau Parcel.
Vite terutama berfokus pada build pengembangan dan mungkin tidak memiliki banyak fitur untuk build produksi seperti webpack atau Parcel.
Vite adalah alat pembangunan yang relatif baru dan mungkin tidak diadopsi secara luas oleh komunitas seperti webpack atau Parcel, sehingga dapat mempersulit pencarian bantuan atau sumber daya.

Singkatnya, Vite adalah pilihan bagus bagi pengembang yang mencari cara yang lebih cepat dan efisien untuk membangun dan mengembangkan aplikasi JavaScript, terutama untuk proyekskala kecil-menengahe. Webpack dan Parcel lebih banyak diadopsi, memiliki fitur yang lebih canggih, dan lebih banyak plugin yang tersedia. Yang terbaik adalah mengevaluasi kebutuhan proyek spesifik Anda dan memilih alat yang paling sesuai dengan kebutuhan Anda.

Migrasi dari Webpack

Bermigrasi dari webpack ke Vite bisa menjadi proses yang mudah, namun ada beberapa hal yang perlu diingat:

Pastikan basis kode Anda menggunakan fitur JavaScript terbaru, seperti modul ES, karena Vite mengandalkannya untuk menangani impor.
Anda harus menghapus semua file konfigurasi khusus webpack, seperti webpack.config.js, dan menggantinya dengan file vite.config.js.
Anda perlu memperbarui file package.json untuk mengganti perintah webpack dengan perintah Vite.
Tinjau dependensi proyek Anda dan hapus semua pemuat atau plugin webpack yang tidak lagi diperlukan.
Uji aplikasi Anda secara menyeluruh setelah migrasi untuk memastikan semuanya berfungsi sesuai harapan.
Jika menggunakan plugin atau pemuat yang tidak didukung oleh Vite, Anda harus mencari alternatif atau menerapkannya secara manual.

Disarankan juga untuk melakukan migrasilangkah demi langkah, sambil menguji dan memperbaiki masalah, daripada melakukan semuanya sekaligus. Ini akan mengurangi stres pada prosesnya dan Anda akan memiliki kontrol lebih besar terhadap hasilnya.

Anda juga dapat melihat plugin ini untuk migrasi: https://github.com/originjs/webpack-to-vite

Ingatlah bahwa Vite adalah alat pembuatan yang lebih sederhana dan lebih cepat, alat ini dirancang untuk menangani proyek berukuran kecil-menengah, jika proyek Anda adalah aplikasi monolitik besar, Anda mungkin ingin mengevaluasi apakah Vite adalah yang terbaik pilihan untuk Anda atau jika Anda harus tetap menggunakan webpack atau alat pembangunan lain yang lebih mapan.

Kesimpulan

Kesimpulannya, Vite adalah alat pembangunan dan server pengembangan modern yang dirancang untuk memberikan pengalaman pengembangan yang lebih cepat dan efisien bagi pengembang JavaScript.

Ia menggunakan fitur modul ES asli di browser untuk menangani impor, yang memungkinkan pembangunan pengembangan lebih cepat dan penggantian modul panas. Vite juga memiliki sistem plugin, kemudahan penggunaan, dan dokumentasi yang sangat baik. Itu dapat menangani proyek ukuran kecil-menengah dengan mudah dan tidak memerlukan file konfigurasi.

Ini bisa menjadipilihan bagus bagi pengembang yang mencari cara yang lebih cepat dan efisien untuk membangun dan mengembangkan aplikasi JavaScript, terutama untuk proyek berukuran kecil-menengah.

Namun, ini mungkin bukan pilihan terbaik untukaplikasi monolitik besar yang memerlukan proses pembangunan yang lebih kompleks atau untuk proyek yang memerlukan ekosistem plugin yang lebih kuat.

Bermigrasi dari webpack ke Vite bisa menjadi proses yang mudah namun perlu dilakukan dengan hati-hati dan langkah demi langkah. Yang terbaik adalah mengevaluasi kebutuhan proyek spesifik Anda dan memilih alat yang paling sesuai dengan kebutuhan Anda.