使用 import 語句導(dǎo)入模塊時(shí),會(huì)自動(dòng)執(zhí)行所加載的模塊钠署。而當(dāng)使用組件庫或公共方法庫的時(shí)候哗戈,往往并不希望如此。
假設(shè) Common.js 文件為公共方法庫
import A from './A';
import B from './B';
import C from './C';
export {
A,
B,
C
}
此時(shí)若希望只引用 Common.js 中的A模塊玻佩,即
import {A} from './Common.js';
但實(shí)際B和C模塊代碼也被執(zhí)行了出嘹。
為了使程序能如你所愿的僅執(zhí)行A模塊,需要使用屬性 getter 動(dòng)態(tài) require 的方式來修改 Common.js 文件咬崔。
const Common = {
get A(){
const module = require('./A');
return (module && module.__esModule)? module.default:module;
}
get B(){
const module = require('./B');
return (module && module.__esModule)? module.default:module;
}
get C(){
const module = require('./C');
return (module && module.__esModule)? module.default:module;
}
}
module.exports = Common;
這樣在使用到A模塊的時(shí)候才會(huì)執(zhí)行 require('./A').default税稼,并不會(huì)加載B和C。
至此垮斯,使用該方式導(dǎo)出模塊可以減少引用模塊時(shí)的無效加載數(shù)量郎仆,達(dá)到優(yōu)化渲染速度的目的。