Apakah pemuatan atas permintaan dalam vue

Dalam vue, pemuatan atas permintaan juga dipanggil pemuatan tertunda atau pemuatan malas, yang bermaksud memuatkan sumber seperti yang diperlukan; terdapat tiga cara untuk melaksanakan pemuatan atas permintaan dalam projek vue: teknologi komponen tak segerak dan import( ) yang dicadangkan oleh es , "require.ensure()" disediakan oleh webpack.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Pemuatan atas permintaan, juga dikenali sebagai pemuatan tertunda atau pemuatan malas, adalah untuk memuatkan sumber mengikut keperluan dan hanya akan dimuatkan apabila ia digunakan.

Mengapa perlu memuatkan atas permintaan

Dengan perkembangan Internet, halaman web perlu membawa lebih banyak fungsi. Bagi laman web yang menggunakan aplikasi satu halaman sebagai seni bina bahagian hadapan, mereka akan menghadapi masalah sejumlah besar kod yang perlu dimuatkan pada halaman web, kerana banyak fungsi tertumpu dalam satu HTML. Ini akan membawa kepada pemuatan halaman web yang perlahan, interaksi yang tersekat dan pengalaman pengguna yang sangat buruk.

Punca masalah ini ialah kod yang sepadan dengan semua fungsi dimuatkan pada satu masa, tetapi sebenarnya, pengguna hanya boleh menggunakan sebahagian daripada fungsi pada setiap peringkat. Oleh itu, cara untuk menyelesaikan masalah di atas adalah dengan memuatkan hanya kod yang sepadan dengan fungsi yang pengguna perlukan pada masa ini, iaitu apa yang dipanggil pemuatan atas permintaan.

Cara melaksanakan pemuatan atas permintaan dalam projek vue

3 cara untuk melaksanakan pemuatan atas permintaan dalam projek vue: teknologi komponen tak segerak vue, import() es cadangan, webpack Disediakan require.ensure()

teknologi komponen tak segerak vue

penghalaan konfigurasi vue-router, menggunakan teknologi komponen tak segerak vue, boleh dicapai Beban atas permintaan. Dengan cara ini, komponen seterusnya menjana fail js

Kes penggunaan:

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require(['../components/PromiseDemo'], resolve)
}

import() cadangan es (disyorkan)

Dokumentasi rasmi pek web: menggunakan import() dalam pek web

dokumentasi rasmi vue: menghalakan pemuatan malas (menggunakan import())

Kes penggunaan:

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')

// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
export default new Router({
    routes: [
        {
            path: '/importfuncdemo1',
            name: 'ImportFuncDemo1',
            component: ImportFuncDemo1
        },
        {
            path: '/importfuncdemo2',
            name: 'ImportFuncDemo2',
            component: ImportFuncDemo2
        }
    ]
})

require.ensure() disediakan oleh webpack

vue-router konfigurasikan penghalaan, gunakan teknologi require.ensure webpack dan anda boleh juga melaksanakan akhbar Perlu dimuatkan.

Dalam kes ini, berbilang laluan yang menyatakan chunkName yang sama akan digabungkan dan dibungkus ke dalam satu fail js.

Contohnya:

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
},
{
    path: '/hello',
    name: 'Hello',
    // component: Hello
    component: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
}

[Pengesyoran berkaitan: tutorial vue.js]

Atas ialah kandungan terperinci Apakah pemuatan atas permintaan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!