vue.js项目如何按功能菜单打包，实现按需加载？

Question

最近做的vue.js项目和之前公司的angular项目对比了一下（之前公司angular项目参与较少，所以只是通过访问之前公司的网站，对比看了一下http请求），发现一些问题：

注：之前公司采用angularjs，目前公司采用vue.js技术，所以以下直接简称angular项目和vue项目

angularjs项目：
1、http请求最大返回体积为100kb左右（稍大一点的图片不算）；
2、点击每一个不同的菜单，都有新的http请求，且状态为200（说明不是缓存）；
3、请求数量相对较多（首页70个请求左右）；
特点：请求多，单文件（请求）体积小

vue项目：
1、最大请求文件为app.xxx.js，开启gzip压缩后1.3mb，为开启的话3.xmb;
2、点击不同请求，发现只有少量较大（webpack设置的）的图片和api请求；
3、请求数量非常少，首页不到10个请求，其他一级菜单几乎都没有css和js文件加载；
主要体现打包（肯定也压缩了）
特点：请求少，单文件体积较大

通过比较可以发现如下问题：
vue.js（配置的webpack）几乎把所有资源（xxx.vue、js、css）都打包到一起了（app.xxx.js）了；
没有按需加载（希望可以按功能），点击不同的菜单，菜单下对应的（xxx.vue、js、css）加载，点击已经下载的菜单资源，才缓存。

是否可以按照指定的方式来打包压缩呢？
1、宁愿多一点请求，解决单个文件太大导致加载时间太长的问题；
2、按需加载，减少不必要的浪费；

Answer 1

https://router.vuejs.org/zh-c...

多看文档，你遇到的问题基本上官方都有解决方案了

Answer 2

### 这样是路由懒加载吗?

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/demo',
      name: 'demo',
      component: () => import('./views/demo.vue')
    },
    {
      path: '/vuex',
      name: 'vuex',
      component: () => import('./views/vuex.vue')
    }
  ]
})