Vue Academy · Pelajaran

Tree-Shaking dan Impor Otomatis

Ekspor bernama untuk tree-shaking, integrasi unplugin-vue-components, serta konfigurasi resolver.

Tree-Shaking dan Impor Otomatis adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Apa Itu Penghapusan Kode Tak Terpakai

Penghapusan kode tak terpakai adalah penghilangan kode mati: penggabung membuang ekspor yang tidak pernah diimpor pengguna. Pustaka yang dibangun dengan baik memungkinkan aplikasi menyertakan hanya komponen yang digunakan, sehingga paket tetap kecil.

Ekspor Bernama Memungkinkannya

Gunakan ekspor bernama dari titik masuk agar setiap impor dapat dianalisis secara statis. Satu ekspor default yang memuat semuanya (objek agregator) tidak dapat menjalani penghapusan kode tak terpakai.

// GOOD: named exports
export { MyButton } from "./MyButton.vue";
export { MyCard } from "./MyCard.vue";

Hindari Objek Agregator Default

Mengekspor satu objek yang berisi semua komponen memaksa penggabung mempertahankan semuanya, meskipun aplikasi hanya menggunakan satu komponen.

// BAD: defeats tree-shaking
export default { MyButton, MyCard, MyTable };

Pengguna Mengimpor yang Dibutuhkan

Dengan ekspor bernama, pengguna melakukan destrukturisasi hanya pada komponen yang digunakan, sedangkan sisanya dibuang dari pembangunannya.

import { MyButton } from "my-ui-lib";
// MyCard, MyTable are never bundled

Kolom sideEffects

Penggabung menganggap modul mungkin memiliki efek samping dan mempertahankannya. Menetapkan "sideEffects": false dalam package.json memberi tahu penggabung bahwa modul Anda murni dan aman untuk disingkirkan.

{
  "sideEffects": false
}

Mendeklarasikan Efek Samping CSS

Jika paket Anda memiliki impor CSS yang tidak boleh dibuang, cantumkan impor tersebut agar hanya impor itu yang dipertahankan.

{
  "sideEffects": ["**/*.css"]
}

Impor Otomatis untuk Pengguna

Untuk menghindarkan pengguna dari impor manual, pustaka menyediakan penyelesai untuk unplugin-vue-components yang mengimpor komponen yang digunakan dalam template secara otomatis.

npm install -D unplugin-vue-components

Menyediakan Penyelesai

Penyelesai adalah fungsi yang, berdasarkan nama komponen yang digunakan, mengembalikan lokasi untuk mengimpornya. Sertakan penyelesai dari paket Anda.

// my-ui-lib/resolver.js
export function MyUiResolver() {
  return {
    type: "component",
    resolve: (name) => {
      if (name.startsWith("My")) {
        return { name, from: "my-ui-lib" };
      }
    }
  };
}

Konfigurasi Pengguna

Pengguna mendaftarkan pengaya dengan penyelesai Anda. Kini komponen yang digunakan dalam template diimpor secara otomatis dan tetap menjalani penghapusan kode tak terpakai.

// consumer vite.config.ts
import Components from "unplugin-vue-components/vite";
import { MyUiResolver } from "my-ui-lib/resolver";

export default defineConfig({
  plugins: [
    vue(),
    Components({ resolvers: [MyUiResolver()] })
  ]
});

Impor Otomatis dan Penghapusan Kode Tak Terpakai

Karena penyelesai mengubah penggunaan template menjadi impor bernama yang sebenarnya, hanya komponen yang digunakan yang dimasukkan ke dalam paket—Anda mendapatkan kemudahan penggunaan sekaligus paket yang kecil.

Hindari Pendaftaran Global

Pustaka yang mendaftarkan semua komponen secara otomatis melalui app.use merusak penghapusan kode tak terpakai. Utamakan ekspor bernama dan penyelesai opsional agar pengguna dapat memilih komponen satu per satu.

Pemeriksaan Singkat

Pengaturan package.json apa yang memberi tahu penggabung bahwa modul Anda aman untuk menjalani penghapusan kode tak terpakai?

Ringkasan

Aktifkan penghapusan kode tak terpakai dengan menggunakan ekspor bernama (jangan pernah menggunakan objek agregator default) dan menetapkan "sideEffects": false (atau mencantumkan CSS). Untuk kemudahan penggunaan, sertakan penyelesai unplugin-vue-components agar pengguna dapat mengimpor komponen yang digunakan secara otomatis, sambil tetap memasukkan hanya komponen yang digunakan ke dalam paket—dan hindari memaksakan pendaftaran global.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Tree-Shaking dan Impor Otomatis” gratis?

Ya — teks lengkap “Tree-Shaking dan Impor Otomatis” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Tree-Shaking dan Impor Otomatis”?

Ekspor bernama untuk tree-shaking, integrasi unplugin-vue-components, serta konfigurasi resolver. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Tree-Shaking dan Impor Otomatis” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Konfigurasi Mode Pustaka Vite
Deklarasi TypeScript untuk Pustaka Komponen
Tree-Shaking dan Impor Otomatis
Mempublikasikan ke npm dan Penerapan Versi Semantik

← Kembali ke Vue Academy