admin 管理员组

文章数量: 1086866

components 异步加载组件

组件的懒加载

require: 运行时调用，理论上可以运用在代码的任何地方，
import：编译时调用，必须放在文件开头
懒加载：component: resolve => require([’@/view/index.vue’], resolve)
用require这种方式引入的时候，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js
非懒加载：component: index
如果用import引入的话，当项目打包时路由里的所有component都会打包在一个js中，造成进入首页时，需要加载的内容过多，时间相对比较长
vue的路由配置文件(routers.js)，一般使用import引入的写法，当项目打包时路由里的所有component都会打包在一个js中，在项目刚进入首页的时候，就会加载所有的组件，所以导致首页加载较慢，
而用require会将component分别打包成不同的js，按需加载，访问此路由时才会加载这个js，所以就避免进入首页时加载内容过多。

正常写法

<template><div class="animation"><HelloWorld></HelloWorld></div>
</template><script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {components: {HelloWorld}
};
</script>

const写法

<template><div class="hello"><One-com></One-com></div>
</template><script>
const One = ()=>import("./one");
export default {components:{"One-com":One},data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script>

异步写法

<template><div><hell /></div>
</template><script>
export default {components: {hell(resolve) {require(["../components/hell2.vue"], resolve);}},data() {return {};}
};
</script><style lang="less" scoped></style>

本文标签： components 异步加载组件

版权声明：本文标题：components 异步加载组件 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1693762079a241331.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。