Vue 组件异步加载(懒加载)

一、vue的编译模式

(1)路由配置信息

 //eg1:
const MSite = resolve => require.ensure([], () =>resolve(require(['myComponent.vue'])) //eg2 需要syntax-dynamic-import插件
const MSite = () => import('../pages/MSite/MSite.vue') //异步加载
//import MSite from '../pages/MSite/MSite.vue' 同步加载 // 声明使用插件
Vue.use(VueRouter)
export default new VueRouter({
routes: [
{
path: '/msite',
// 返回路由组件的函数, 只有执行此函数才会加载路由组件, 这个函数在请求对应的路由路径时才会执行
component: MSite,

Vue 组件异步加载(懒加载)   Vue 组件异步加载(懒加载)

(2)组件或第三方库

A、懒加载组件

 export default {
beforeCreate () {
import('dayjs').then(module => {
this.dayjs = module;
});
},
data () {
return {
dayjs: null
}
}

B、同步加载组件

import utiljs from 'utiljs'
export default {
data () {},
mounted () {}
}
上一篇:J2EE (九) 静态代理和动态代理--间接“美”


下一篇:iOS限制输入表情(emoji),出现九宫格不能输入的解决方法