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

小半 • 2023年2月10日下午10:02 • 技术随笔 • 阅读 197

📖摘要

今天分享下 —— 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')
}