使用 import 语句导入模块时,会自动执行所加载的模块。而当使用组件库或公共方法库的时候,往往并不希望如此。
假设 Common.js 文件为公共方法库
import A from './A';
import B from './B';
import C from './C';
export {
A,
B,
C
}
此时若希望只引用 Common.js 中的A模块,即
import {A} from './Common.js';
但实际B和C模块代码也被执行了。
为了使程序能如你所愿的仅执行A模块,需要使用属性 getter 动态 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模块的时候才会执行 require('./A').default,并不会加载B和C。
至此,使用该方式导出模块可以减少引用模块时的无效加载数量,达到优化渲染速度的目的。