Kemahiran pembangunan Vue3+TS+Vite: Cara menggunakan Vite untuk pemisahan kod dan pemuatan atas permintaan

Kemahiran pembangunan Vue3+TS+Vite: Cara menggunakan Vite untuk pemisahan kod dan pemuatan atas permintaan

Dengan kerumitan kejuruteraan bahagian hadapan dan peningkatan skala projek, pengoptimuman kod telah menjadi satu kemestian bagi setiap pembangun Soalan betul. Aspek penting ini ialah pemisahan kod dan pemuatan atas permintaan. Pemisahan kod boleh membahagikan keseluruhan kod projek kepada kepingan kecil, dan pemuatan atas permintaan boleh memuatkan kod yang sepadan apabila diperlukan, dengan berkesan meningkatkan prestasi dan kelajuan pemuatan halaman web. Dalam projek Vue3+TypeScript, kami boleh mengoptimumkan pemisahan kod dan pemuatan atas permintaan dengan menggunakan alat binaan Vite.

1. Apakah itu Vite?

Vite ialah alat pembinaan bahagian hadapan berdasarkan ESM Ia menggunakan ciri-ciri modul ES asli untuk mencapai permulaan sejuk dan kemas kini panas yang lebih pantas, dan menyokong fungsi pengoptimuman seperti pemuatan atas permintaan dan pemisahan kod.

2. Penggunaan pemisahan kod

Dalam projek Vue3+TypeScript, kami boleh menggunakan fungsi import yang disediakan oleh Vite untuk melaksanakan pemuatan atas permintaan dan pemisahan kod. Kami boleh mengurangkan tekanan memuatkan keseluruhan halaman dengan membahagikan kod kepada modul yang berbeza dan memuatkan modul yang sepadan hanya apabila diperlukan.

1. Pasang Vite

Mula-mula, kita perlu memasang Vite dalam projek. Ia boleh dipasang melalui npm atau benang:

npm install -g create-vite 构建工具初始化
create-vite my-project 初始化新的项目
cd my-project 进入项目目录
npm install 安装依赖

2. Memuatkan modul atas permintaan

Dalam Vue3, kami boleh melaksanakan pemuatan atas permintaan dengan menggunakan fungsi import. Sebagai contoh, kita boleh menggunakan fungsi import untuk memuatkan modul tertentu di tempat ia diperlukan, bukannya memuatkan semua modul sekaligus.

import { createApp, defineAsyncComponent } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

const Home = defineAsyncComponent(() => import('./views/Home.vue'))
const About = defineAsyncComponent(() => import('./views/About.vue'))

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

createApp(App).use(router).mount('#app')

Dalam contoh di atas, kami menggunakan fungsi defineAsyncComponent untuk mencipta komponen tak segerak, dan kemudian memuatkan komponen Laman Utama dan Perihal atas permintaan melalui fungsi import. Ini secara berkesan boleh mengurangkan saiz fail yang diperlukan untuk memuatkan skrin pertama dan meningkatkan kelajuan pemuatan halaman.

3. Konfigurasikan pemuatan atas permintaan Vite

Dalam Vite, kami boleh melaksanakan pemuatan atas permintaan dan pembahagian kod dengan mengkonfigurasi vite.config.js.

1. Pasang kebergantungan

Sebelum menggunakan pemuatan permintaan dan pemisahan kod dalam projek, kita perlu memasang kebergantungan yang sepadan:

npm install @vitejs/plugin-legacy

2. Konfigurasikan vite.config.js

Buat dalam direktori root .js fail dan tambah kod berikut:

import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}

Dalam kod di atas, kami menggunakan pemalam @vitejs/plugin-legacy dan menentukan penyemak imbas yang perlu disokong melalui pilihan sasaran, di mana 'lalai' menunjukkan sokongan untuk pelayar moden , 'bukan IE 11' bermakna pelayar IE11 tidak disokong.

3. Kompilkan projek

Dengan konfigurasi di atas, kami telah menyelesaikan konfigurasi pemuatan atas permintaan dan kod pemisahan. Seterusnya, kita boleh menyusun projek dengan menjalankan arahan berikut:

npm run build

Selepas penyusunan selesai, Vite akan secara automatik memisahkan kod dan memuatkan modul yang sepadan seperti yang diperlukan.

Melalui konfigurasi di atas, kami telah berjaya menggunakan Vite untuk melaksanakan pemuatan atas permintaan dan pemisahan kod. Ini boleh meningkatkan prestasi dan kelajuan pemuatan projek dengan berkesan dan mengurangkan volum pemuatan keseluruhan halaman. Dalam projek Vue3+TypeScript, menggunakan Vite untuk pemisahan kod dan pemuatan atas permintaan adalah pilihan yang sangat baik. Ia boleh menjadikan projek kami lebih cekap dan dioptimumkan serta meningkatkan pengalaman pengguna.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan Vite untuk melaksanakan pemisahan kod dan pemuatan atas permintaan projek Vue3+TypeScript. Dengan mengkonfigurasi pemuatan atas permintaan Vite, kami boleh membahagikan keseluruhan kod projek kepada kepingan kecil atas permintaan dan bukannya memuatkan semua modul sekaligus, dengan itu meningkatkan prestasi halaman dan kelajuan pemuatan. Sebagai alat pembinaan bahagian hadapan berdasarkan ESM, Vite mencapai permulaan sejuk dan kemas kini panas yang lebih pantas dengan memanfaatkan ciri-ciri modul ES asli, sambil menyokong fungsi pengoptimuman seperti pemuatan atas permintaan dan pemisahan kod. Dalam projek sebenar, kami boleh mengkonfigurasi Vite mengikut keperluan khusus untuk mencapai kesan pengoptimuman prestasi terbaik. Saya harap artikel ini akan membantu semua orang dalam mengoptimumkan pemisahan kod dan pemuatan atas permintaan dalam projek Vue3+TypeScript.

Atas ialah kandungan terperinci Kemahiran pembangunan Vue3+TS+Vite: Cara menggunakan Vite untuk pemisahan kod dan pemuatan atas permintaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!