Vue.js作為一款流行的JavaScript框架，引入了一種新的模塊加載方式——import()。這種方式可以幫助開發(fā)者實(shí)現(xiàn)按需加載，提高應(yīng)用體驗(yàn)和性能。

在使用import()之前，我們需要先了解ES6的模塊規(guī)范。ES6模塊系統(tǒng)的語法非常簡(jiǎn)單，只需在腳本文件中使用export關(guān)鍵字暴露一個(gè)模塊，再使用import引入需要的模塊：

// moduleA.js
export function funcA() {
console.log('this is funcA')
}
// moduleB.js
export function funcB() {
console.log('this is funcB')
}
// app.js
import {funcA} from './moduleA'
import {funcB} from './moduleB'
funcA()
funcB()

現(xiàn)在我們來看看如何使用import()按需加載模塊。與之前的導(dǎo)入方式不同的是，import()返回的是一個(gè)Promise對(duì)象。我們可以在Promise的then方法中使用導(dǎo)入的模塊。

// app.js
import('./moduleA.js').then(moduleA =>{
moduleA.funcA()
})
// 如果需要導(dǎo)入多個(gè)模塊
Promise.all([
import('./moduleA.js'),
import('./moduleB.js')
]).then(([moduleA, moduleB]) =>{
moduleA.funcA()
moduleB.funcB()
})

在實(shí)際應(yīng)用中，當(dāng)應(yīng)用比較龐大時(shí)，按需加載模塊可以幫助我們實(shí)現(xiàn)按需加載不必要的代碼，提高頁面加載速度和性能。同時(shí)，配合webpack這種前端構(gòu)建工具使用，可以實(shí)現(xiàn)自動(dòng)代碼分割，進(jìn)一步提高應(yīng)用的性能和用戶體驗(yàn)。