vue-router路由懒加载

Posted 2023-04-10 545龙哥哥

路由懒加载指的是打包部署时将资源按照对应的页面进行划分，需要的时候加载对应的页面资源，而不是把所有的页面资源打包部署到一块。避免不必要资源加载。（参考vue项目实现路由按需加载(路由懒加载)的3种方式_小胖梅的博客-CSDN博客_vue懒加载 ）

// 非懒加载
import Home from '@/components/Home'

const routes = [
  
    path: '/home',
    name: 'home',
    component: Home
  
]

这里有三种方式可以实现vue项目路由跳转时资源的按需加载。

1. vue异步组件

  vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。

  但是，这种情况下每一个组件就会生成一个js文件，不能分类指定chunkName

// vue异步组件

  path: '/home',
  name: 'home',
  component: resolve => require(['@/components/home'], resolve)

2. 使用import

// const 组件名 = () => import('组件路径');
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const Home = () => import('@/componnets/home');
const Index = () => import('@/components/index');

// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件
// 把组件按组分块
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home');
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')


  path: '/home',
  name: 'home',
  component: Home
, 
  path: '/index',
  name: 'index',
  component: Index

3. webpack提供的require.ensure()

  该方法也可指定相同的chunkName，合并打包成一个js文件。

  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
, 
  path: '/index',
  name: 'index',
  component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
, 
  path: '/about',
  name: 'about',
  // 传入空字符串 则每个component会单独生成一个js文件
  component: r => require.ensure([], () => r(require('@/components/index')), '')

公司后台项目路由懒加载模式修改（新后台vue2.0）

项目背景：老后台（angular1.x版本）正在迁移新后台（vue2.0）

未修改之前：

打完包之后有156个js文件，这是按照每个路由对应的component生成一个js文件，这就意味着到时候老后台全部迁移到新后台之后，目前大概有800个路由，那就会生成800多个js文件，这种模式的路由懒加载对于后台管理系统其实是没有必要的，所以考虑通过webpackChunkName将各个模块分类，一个一级分类指定一个chunkName。

修改之后：

打完包只有25个js文件，看起来就舒服多了。

各个大模块路由懒加载修改的格式如下：

在一个大的路由模块下，指定相同的webpackChunkName。

修改之后打包生成的文件名格式如下：

hash值之前为自己设置的webpackChunkName名称。

这里当时遇到的一个问题如下图所示：

如左边红框所示，生成的文件里面多了一个用 '~' 拼接起来的js文件。

这个后来翻到了webpack的splitChunks.automaticNameDelimiter。因为项目中在这三个模块下，都引入了同一个文件(UEditor)，并且项目中也并没有指定对应的webpackChunkName，所以webpack内部自动处理，将这个文件单独提取出来，并自动命名，命名规则见webpack官方文档，连接符 '~' 是可配置的。

出现  '~' 连接符的组件引入方式如下：

修改之后的引入方式如下：

指定了webpackChunkName，以后其他模块引入富文本UEditor时也请按照此方式引入，命名保持相同。

以下是webpack官方文档对automaticNameDelimiter配置的解释。

vue-router核心原理解析：(参考【第2194期】SPA 路由三部曲之核心原理 )

路由描述了URL和UI之间的映射关系，这种映射是单向的，即URL变化引起UI更新(无需刷新页面)。前端路由最主要的展示方式有2种：

• 带有hash的前端路由：地址栏URL中有 #，即hash值，不好看，但兼容性高。
• 不带hash的前端路由：地址栏URL中没有 #，好看，但部分浏览器不支持，还需要后端服务器支持。

在vue-router中，这两种展示形式，被定义成两种模式，即Hash模式与History模式。前端路由实现原理很简单，本质上就是检测URL的变化，截获URL地址，通过解析、匹配路由规则实现UI更新。

① Hash模式

一个完整的URL包括：协议、域名、端口、虚拟目录、文件名、参数、锚。

Hash值指的是URL地址中的锚部分，也就是# 后面的部分。hash也称作锚点，是用来做页面定位的，与hash值对应的DOM id显示在可视区域内。在html5的history新特性出现前，基本都是使用监听hash值来实现前端路由的。hash值更新有一下几个特点：

• hash值是网页的标志位，HTTP请求不包含锚部分，对后端无影响
• 因为HTTP请求不包含锚部分，所以hash值改变时，不触发网页重载
• 改变hash值会改变浏览器的历史纪录
• 改变hash值会触发window.onhashchange()事件

而改变hash值的方式有3种：

• a标签使锚点值变化，例:<a href="#/home"></a>
• 通过设置window.location.hash的值
• 浏览器前进键(history.forword())、后退键(history.back())

综上所述，这3种改变hash值的方式，并不会导致浏览器向服务器发送请求，浏览器不发出请求，也就不会刷新页面。hash值改变，触发全局的window对象上的hashchange事件。所以hash模式路由就是利用hashchange事件监听URL的变化，从而进行DOM操作来模拟页面跳转。

② History模式

主要应用了History API新增的两个方法：pushState()、replaceState()，均具有操纵浏览器历史记录的能力。

history.pushState(state, title, URL)，该方法共接收3个参数：

• state：用于存储该URL对应的状态对象，可以通过history.state获取
• title：标题，目前浏览器并不支持
• URL：定义新的历史URL记录，需要注意，新的URL必须与当前URL同源，不能跨域

pushState函数会向浏览器的历史记录中国添加一条，history.length的值会+1，当前浏览器的URL变成了新的URL。需要注意的是：仅仅将浏览器的URL变成了新的URL，页面不会加载、刷新。

history.replaceState(state, title, URL)

replaceState的使用与pushState非常相似，都是改变当前的URL，页面不刷新。区别在于replaceState是修改了当前的历史记录项而不是新建一个，history.length的值保持不变。

window.onpopstate()

为了配合history.pushState()或者history.replaceState()，HTML5还新增了一个事件，用于监听URL历史记录改变：window.onpopstate。

官方对于window.onpopstate()事件的描述是这样的：

每当处于激活状态的历史记录条目发生变化时，popstate事件就会在对应的window对象上触发。如果当前处于激活状态的历史记录条目是由history.pushState()方法创建，或者由history.replaceState()方法修改过的，则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝。调用history.pushState()或者history.replaceState()不会触发popstate事件。popstate事件只会在浏览器某些行为下触发，比如点击后退、前进按钮(或者在javascript中调用 history.back()、history.foward()、history.go()方法)，此外，a标签的锚点也会触发该事件。

结合上述，在浏览器支持 pushState 的情况下，hash 模式路由也可以使用 pushState 、replaceState 和 popstate 实现。pushstate 改变 hash 值，进行跳转，popstate 监听 hash 值的变化。小小的剧透，vue-router 中不管是 hash 模式，还是 history 模式，只要浏览器支持 history 的新特性，使用的都是 history 的新特性进行跳转。

vue-router和webpack懒加载，页面性能优化篇

在vue单页应用中，当项目不断完善丰富时，即使使用webpack打包，文件依然是非常大的，影响页面的加载。如果我们能把不同路由对应的组件分割成不同的代码块，当路由被访问时才加载对应的组件（也就是按需加载），这样就更加高效了。——引自vue-router官方文档

如何实现？？

vue异步组件

vue-router配置路由，使用vue的异步组件技术，可以实现懒加载，代码如下：// 每个组件都会生成一个js文件

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../view/List.vue';

Vue.use(Router);

export default new Router({
routes： [
  {
    path: '/home/list',
    name: 'list',
    components: resolve => require(['../view/List.vue'], resolve)
  }
],

动态import（webpack > 2.4）

vue、webpack官方推荐

情况一：每个组件都会打包生成一个js文件

const List = () => import('../view/List.vue')

// 在路由配置中什么都不需要改变，像往常一样使用组件：
export default new Router({
routes： [
  {
    path: '/home/list',
    name: 'login',
    components: Login
  }，
  {
    path: '/home/user',
    name: 'user',
    components: User
  }
],

情况二：所有组件合并打包在一个异步块chunk中

const List = () => import(/* webpackChunkName: "home" */ './List.vue')
const User = () => import(/* webpackChunkName: "home" */ './User.vue')

// 在路由配置中什么都不需要改变，像往常一样使用组件：
export default new Router({
routes： [
  {
    path: '/home/list',
    name: 'list',
    components: List
  }，
  {
    path: '/home/user',
    name: 'user',
    components: User
  }
],

// 在webpack.base.config.js中配置 ChunkFileName：
output: {
path: config.build.assetsRoot,
filename: '[name].js',
chunkFilename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath
},

另一种写法，更简洁：同样需要在webpack.base.config.js中配置 ChunkFileName：

{
  path: '/home/list',
  name: 'list',
  component: () => import(/* webpackChunkName:"list"*/ '../view/List.vue')
},
{
  path: '/home/user',
  name: 'user',
  component: () => import(/* webpackChunkName:"user"*/ '../view/User.vue')
},

webpack提供的require.ensure()

语法如下：摘自官网

require.ensure(dependencies: String[], callback: function(require), chunkName: String

多个路由指定相同的chunkName，在这里chunkName为home，会合并打包成一个js文件。

{
 path: '/home/list',
 name: 'list',
 // component：list
 component: r => require.ensure([], () => r(require('../view/Lst.vue')), 'home')
},
{
 path: '/home/user',
 name: 'user',
 // component：user
 component: r => require.ensure([], () => r(require('../view/User.vue')), 'home')
}

// 在webpack.base.config.js中配置 ChunkFileName 和 publicPath：
output: {
path: config.build.assetsRoot,
filename: '[name].js',
chunkFilename: '[name].js',
publicPath: './',
publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath
},

在实践过程中应该会遇到各种问题，到时候再继续补充，前端新手，多多指教！

来源：https://segmentfault.com/a/1190000017766798