相比 React,vue 实现组件的懒加载还是比较简单的, 以下是官方文档的说明
- import Vue from 'vue'
- import VueRouter from 'vue-router'
- Vue.use(VueRouter)
- export default new VueRouter({
- routes: [
- {
- path: '/',
- name: 'Navigator',
- component: () => import(/* webpackChunkName: "navigator" */ './../components/Navigator')
- },
- {
- path: '/tucao',
- name: 'Tucao',
- component: () => import(/* webpackChunkName: "tucao" */ './../components/Tucao')
- }
- ]
以上是按照官方文档写的懒加载代码, 但是发现 chunk 命名并没生效
, 再去仔细看看官方文档说明
"结合 Vue 的异步组件和 Webpack 的代码分割功能, 轻松实现路由组件的懒加载"
其实还差一个 webpack 配置, 就是 webpack output 需要加个 chunkFilename
chunkFilename: '[name].js'
来源: http://www.qdfuns.com/article/51117/54ff1b8a1f54dfb4fac372ef99d0abf6.html