vue中引⼊按需加载组件的⽅式
普通的组件加载⽅式：
import Hello from'../components/Hello'
这样做的结果就是webpack在npm run build的时候会打包成⼀个整个的js⽂件，如果页⾯⼀多，会导致这个⽂件⾮常⼤，加载缓慢，为了解决这个问题，需要将他分成多个⼩⽂件，⽽且还要实现异步按需加载，即⽤到了再加载，⽽不⽤⼀次全部加载
第⼀种：vue官⽅提供的，⼀个组件会打包成⼀个js⽂件
const orderList = resolve => require(['../components/orderList .vue'], resolve)
{
path: '/orderList ',
name: 'orderList ',
component:  (resolve )=> require(['../components/orderList .vue'], resolve),
}
第⼆种：es提案的import（），如果不指定webpackChunkName，那么⼀个组件会打包成⼀个js⽂件，
component: () => import('../pages/orderManage/orderDetail'),
// 下⾯2⾏代码，指定了相同的webpackChunkName，会合并打包成⼀个js⽂件。把组件按组分块
const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */'../components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */'../components/index')
第三种：webpack提供的sure()，这样可以实现按需加载，并且你可以将多个相同类的组件打包成⼀个⽂件，只要给他们指定相同的chunkName即可，如⽰例中的pack将会打包成⼀个⽂件
{
path: '/demo',
name: 'Demo',
component: r => sure([], () => r(require('../components/PromiseDemo')), 'pack')
},
{
path: '/hello',
name: 'Hello',
component: r => sure([], () => r(require('../components/Hello')), 'pack')
}
第四种：对于⼤型系统项⽬，有上百个vue路由，如果此时再进⾏懒加载的话，会造成在每⼀次切换路由时都很慢，在进⾏热更新时加载很慢的情况，此时解决⽅法就是让他在开发环境下不要懒加载，在⽣产环境下再进⾏懒加载。
_production.js:  ports = file => () => import('@/pages/' + file + '.vue')
_development.js:  ports = file =>  import('@/pages/' + file + '.vue').default
在加载组件的时候就可以这样写
const _import = require('./_import_' + v.NODE_ENV)
  {
path: 'homeindex',
name: 'homeindex',
title: '⾸页',
component: _import('courses/homeindex')
}
那么是在哪⾥配置环境变量的值呢？在config/index.js的配置⽂件下
附加：
const _import = require('./_import_' + v.NODE_ENV)
component: _import('permissions/roleindex')
关于上⾯import和require两种写法的区别：
webpack 打包时⽀持 CommonJS、AMD 和 ES6 的模块化系统。
我们通常写 .vue 单⽂件组件时，在 script 语⾔块中使⽤的是 ES6 的语法，使⽤ export default 进⾏默认导出。
1.使⽤require 是 CommonJS的模块导⼊⽅式，不⽀持模块的默认导出，因此导⼊的结果其实是⼀个含 default 属性的对象，因此需要使⽤.default 来获取实际的组件选项。
2.使⽤ ES6 的 import 语句，ES6 的模块化导⼊导出语法。import 时需要给定⼀个变量名，所有 import 语句必须统⼀放在模块的开头。
import语句如果 .vue ⽂件中使⽤的本来就是 CommonJS 或者 AMD 的模块化系统语法，导出的是 ports 对象作为组件选项，那么使⽤require 导⼊时就不需要使⽤ .default 来获取。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。