Vue-Router + Webpack 路由懒加载实现

Admin
Admin
Admin
49
文章
6
评论
2020年4月23日17:10:39 评论 224 826字阅读2分45秒

当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。

一、官方文档说明

二、未使用路由懒加载时的配置

三、路由懒加载时的配置

  1. import Vue from 'vue';
  2. import Router from 'vue-router';
  3. Vue.use(Router);
  4. export default new Router({
  5.     mode: 'history',
  6.     base: process.env.BASE_URL,
  7.     routes: [
  8.         {
  9.             path: '/',
  10.             name: 'home',
  11.             component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
  12.         },
  13.         {
  14.             path: '/about',
  15.             name: 'about',
  16.             component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
  17.         }
  18.     ]
  19. });

以上是按照官方文档写的懒加载代码,但是发现chunk命名并没生效,再去仔细看看官方文档说明

“结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载”

其实还差一个 webpack 配置,就是 webpack output 需要加个 chunkFilename

  1. chunkFilename: '[name].js'

四、懒加载方法的封装

时间是一个好东西,记录的是学习的证据

继续阅读
Admin
  • 本文由 发表于 2020年4月23日17:10:39
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
Vue 项目如何分环境打包不同配置 前端开发

Vue 项目如何分环境打包不同配置

在项目开发中,我们的项目一般分为开发版、测试版、预发布版、生产版,Vue-cli 的默认环境一只有 dev 和 prod 两个,之前每次要发布测试版或预发布版都是需要手动修改代码中配置文件后打包,这样...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: