东莞住房和建设局网站,wordpress使用微信登陆,百度电视剧风云榜,分析网站网站前端首屏优化方案之一 项目构建时会整体打包成一个bundle的JS文件#xff0c;而有的代码、模块是加载时不需要的#xff0c;需要分割出来单独形成一个文件块chunk#xff08;不会打包在main里#xff09;#xff0c;让模块懒加载#xff08;想加载时才加载#xff09;而有的代码、模块是加载时不需要的需要分割出来单独形成一个文件块chunk不会打包在main里让模块懒加载想加载时才加载以减少应用体积、减少加载时的体积。 import是关键字而非函数类比typeoftypeof 123’ or typeof(123)静态导入 import xxx from 导入并加载时导入的模块会被编译不是按需编译动态导入import() 根据条件或按需的模块导入动态导入应用场景 模块太大使用可能性低模块的导入占用了大量系统内存模块需要异步获取导入模块时需要动态构建路径路径拼接import(./ a .js)模块中的代码需要程序触发了某些条件才运行比如点击事件 不能滥用动态导入静态导入有利于初始化依赖动态导入不能用于静态的程序分析和tree shaking
// module.js
export default class MyTest {construct() {console.log(构造器)}
}templatedivbutton classtest clickclickBtn查看/button/div
/templatescript
export default {name: Plan,methods: {async clickBtn() {const res await import(../libs/module.js);// import返回值是Promiseconsole.log(res, res);let myTest res.default;new myTest();},},
};
/script // module.js
export const plus (a, b) {return a b
}script
export default {name: Plan,methods: {async clickBtn() {import(../libs/module.js).then((res) {const { plus } res;console.log(plus 1 2 , plus(1, 2)); // 3});},},
};
/script
如果使用vite/脚手架create react app搭建的项目 → 可以直接使用import()如果是手动做webpack的配置查看代码分割指南 webpack动态导入如果是用babel解析import() 需要安装依赖babel/plugin-syntax-dynamic-import在动态注册vue-router时出现对import的语法错误可能就是需要安装该依赖
react中使用
对于动态import的内容不会直接打包进main.js里如果是静态导入的就会直接打包进一个js里
function Button() {// 函数里定义方法要写关键字声明 和类不同const handleClick async () {// 若export default 接收到的就是default否则接收到导出的const plus await import(./index.js).then(res res.default)// await then 将res.default保存到resplus(1, 2)}return (button onClick{handleClick}getSum/button)
}
ReactDOM.render(Button /,document.getElementById(app)
)
