当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。
一、官方文档说明
二、未使用路由懒加载时的配置
三、路由懒加载时的配置
- import Vue from 'vue';
- import Router from 'vue-router';
- Vue.use(Router);
- export default new Router({
- mode: 'history',
- base: process.env.BASE_URL,
- routes: [
- {
- path: '/',
- name: 'home',
- component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
- },
- {
- path: '/about',
- name: 'about',
- component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
- }
- ]
- });
以上是按照官方文档写的懒加载代码，但是发现chunk命名并没生效，再去仔细看看官方文档说明
“结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载”
其实还差一个 webpack 配置，就是 webpack output 需要加个 chunkFilename
- chunkFilename: '[name].js'
四、懒加载方法的封装
时间是一个好东西，记录的是学习的证据
继续阅读
评论