require.context加载页面

vue导入页面方式与对比

vue router使用require.context导入页面,以及其他导入方式对比

之前我写vue路由用import一个页面一个页面引入,多少个页面组件,就多少行import,需求越来越多,页面也越来越多,到目前为止300多个页面了,代码就:

require.context加载页面插图

还好是创建一个页面添加一个路由,要是一次添加300个要疯掉。

使用require.context自动import导入所有页面

首先要require.context怎么用:
require.context(directory,useSubdirectories,regExp)
directory: 表示检索的目录
useSubdirectories: 表示是否检索子文件夹
regExp: 匹配文件的正则表达式,一般是文件名
例如:

require.context加载页面插图1

const files = require.context('../views', true, /\.vue$/)
const modules = {}
files.keys().forEach((key) => {
  let name = key.substring(key.lastIndexOf("/")+1)
  modules[name.replace(/(\.\/|\.vue)/g, '')] = files(key).default
})

files.keys().forEach((key): 循环的key为页面路径字符串
files(key).default: 页面组件(值为import Home from ‘../views/Home.vue’中的Home)
我相信使用console.log()去打印一下应该就知道了

然后,我的routes数组是这样写的

require.context加载页面插图2

通过require.context的写法,可以省去300多行import,但是!但是!但是!不能懒加载页面!
不能像一下几种懒加载一样,也不能结合以下方法

// 第一种懒加载方法
resolve=>(require(['需要加载的路由的地址']),resolve)

// 第二种懒加载方法
//指定了相同的webpackChunkName,会合并打包成一个js文件。
// 路由也是正常的写法  这种是官方推荐的写的 按模块划分懒加载
{
    path: '/home',
    name: 'home',
    component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
},

// 第三种懒加载方法 使用webpack提供的require.ensure()
// 指定了相同的 打包生成js文件名 ,会合并打包成一个js文件。
{
    path: '/home',
    name: 'home',
    component: r => require.ensure([], () => r(require('@/components/home')), '合并打包生成js文件名')
},

最后总结一下:

以下情况使用require.context引入最佳:
1、如果页面不多,打包的app.js文件不超过240kb
2、在main.js中引入大量公共组件使用
3、组件内引入多个组件使用require.context

如果打包的app.js超过240kb使用第二种,官方推荐性能最佳!官方推荐性能最佳!官方推荐性能最佳!

暂无评论

发送评论 编辑评论


				
上一篇
下一篇