动态引入（异步加载import和require）

组件懒加载的方式

1. require（AMD规范）

{
path: '/demo',
name: 'Demo',
component: resolve => require(['../components/Demo/index'], resolve)
}

这种方法可以实现按需懒加载，并且一个组件会打包成一个js文件.

但是这里有一个坑，如果你的组件是在Demo目录下的index.vue组件，你的组件路径必须精确到/index, 如果只是到demo，是会找不到对应的组件的。

这种方式有个弊端， 就是不能指定某几个组件打包到同一个js里。

还可以有以下写法：

component: require('../../components/Demo/index').default,

this.img1 = require('./img1.png')

 

2. import (ES6提案推荐)

{
name: Demo,
path: /demo,
component: () => import(`@/views/${url}`)
}

这种方法可以实现按需懒加载，并且一个组件会打包成一个js文件。也可以加上/* webpackChunkName: "[name]" */， 将不同组件打包到同一个js文件中，如：

() => import(/* webpackChunkName: "[name]" */ `@/views${url}`)
[name]就是要指定的分类的名字

这里也有一个坑，如果你项目用的是webpack2.x的版本，那么import里面是不能带参数的，比如上面那个例子，组件是引入失败的。

 

原文链接：https://blog.csdn.net/yorcentroll/article/details/122679683