Vue CLI 入门04 vue-router懒加载

懒加载

前提

npm run build对vue项目打包

自动生成dist文件夹，里面有js文件夹；

js目录下，app文件为我们自己写的业务文件；chunk-vendor文件为第三方框架/库（如vue、axios、vue-router等）。

---

插入：vue-cli4 打包时的踩坑

打包时报错Error: Callback was already called.

网上的解决方法是把node_modules删除后，npm install，再打包。实测无效。

有效方法是：

• 新建一个和package.json同级的vue.config.js文件

• 往里面添加

  module.exports = {
    css: {
      extract: false
    }
  }
  

• 再次打包，succeed！

参考：Vue-cli-service-build报错，求助大佬！！ - 中文 - Vue Forum (vuejs.org)

---

概念

​ 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

​ 路由懒加载的主要作用是将路由对应的组件打包成一个个的js代码块；

​ 只有在这个路由被访问到的时候，才加载对应的组件。

操作

• 在router的index.js文件中，把直接导入组件的代码删除，改为懒加载写法，routes不用变

//旧写法直接导入
// import Home from '../components/Home.vue'
// import Room from '../components/Room.vue'
// import User from '../components/User.vue'

//懒加载写法，需要使用组件才从文件中import
const Home = () => import('../components/Hoem.vue')
const Room = () => import('../components/Room.vue')
const User = () => import('../components/User.vue')

• 打包完成后，多出了3个chunk文件，就是这三个组件相关的js
  

---