Vue-router路由import 与 require 区别和懒加载

最新推荐文章于 2024-12-06 11:24:05 发布

ZZD的笔记

最新推荐文章于 2024-12-06 11:24:05 发布

阅读量820

点赞数 1

分类专栏： ZZD的前端笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41602925/article/details/131639544

版权

ZZD的前端笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章探讨了在Node编程中import与require的差异，import是ES6的语法标准，而require遵循AMD规范。import在编译时执行，require则在运行时。在Vue-router中，import常用于同步加载，而require结合Webpack的异步加载功能如require.ensure或动态导入用于懒加载，以实现路由的按需加载和优化应用性能。

摘要由CSDN通过智能技术生成

参考链接：Vue-router路由import 与 require 区别和懒加载_require vue-router_陈永佳的博客-CSDN博客

📖摘要
今天分享下 —— Vue router 路由 import 与 require 使用区别以及懒加载，欢迎关注！

🌂node 编程
node 编程中最重要的思想就是模块化，import 和 require 都是被模块化所使用。

✨import 与 require 区别：
遵循规范
require 是 AMD 规范引入方式
import 是 es6 的一个语法标准，如果要兼容浏览器的话必须转化成 es5 的语法
调用时间
require 是运行时调用，所以 require 理论上可以运用在代码的任何地方
import 是编译时调用，所以必须放在文件开头
本质
require 是赋值过程，其实 require 的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量
import 是解构过程，但是目前所有的引擎都还没有实现 import ，我们在 node 中使用 babel 支持 ES6 ，也仅仅是将 ES6 转码为 ES5 再执行，import 语法会被转码为 require
💖定义vue-router
1. import方式

import Login from '@/pages/views/Login'
import Home from '@/pages/views/Home'

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

2. require 方式，异步加载-组件异步加载即为路由的异步加载

export default [
    {
      path: '/user',
      name: 'user',
      component: resolve => require(['路径'], resolve)
    },
    {
      path: '/detail',
      name: 'detail',
      component: () => resolve => require(['路径'], resolve)
    }
]

3. 官方默认的懒加载方式，用更加简单的写法来组织 Vue 异步组件和 Webpack 的代码分隔

export default [
    {
      path: '/detail',
      name: 'detail',
      component: () => import('路径')
    }
]

4. webpack 提供的 require.ensure()，vue-router 配置路由，使用 webpack 的 require.ensure 技术，也可以实现按需加载。这种情况下，多个路由指定相同的 chunkName，会合并打包成一个 js文件。

{
  path: '/home',
  name: 'home',
  component: r => require.ensure([], () => r(require('路径')), 'demo')
}, {
  path: '/index',
  name: 'Index',
  component: r => require.ensure([], () => r(require('路径')), 'demo')
}