import 和 require 实现路由懒加载的区别

1.调用位置

import 是在编译时调用,所以必须放在文件开头
requier是在运行时调用,可以运用在代码的任何地方

2.本质

require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量
import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require

3.未做懒加载的路由写法

import Login from '@/views/Login'

export default new Router(({
    routes:[
        {
            path:'/login',
            name:'login',
            compontent: Login
        }
    ]
})

上面代码未使用懒加载等处理, 直接引入组件的写法,
使用上述的方法, 页面一加载就会执行 import Login from '@/views/login', 相当于编译执行了加载组件, 打包时将所有的组件内容都打包进同一个js文件, 使得此文件过于庞大, 加载耗时长, 当项目很大的时候会造成首屏渲染卡顿

4.使用import进行懒加载 (推荐使用)

// 例子1: 打包后每个组件生成单独的js文件
export default new Router(({
    routes:[
        {
            path:'/login',
            name:'login',
            compontent: () => import('@/views/Login')
        },
        {
            path:'/home',
            name:'home',
            compontent: () => import('@/views/Home')
        }
    ]
})

// 例子2: 打包后将带有 webpackChunkName 配置的组件按照webpackChunkName分组打包在同一个js文件里
export default new Router(({
    routes:[
        {
            path:'/test1',
            name:'test1',
            compontent: () => import(/* webpackChunkName: "group-foo" */ '@/views/Test1')
        },
        {
            path:'/test2',
            name:'test2',
            compontent: () => import(/* webpackChunkName: "group-foo" */ '@/views/Test2')
        }
    ]
})

使用import对路由进行懒加载, 打包时会为每一个组件生成对应的js文件, 实现代码分割,首屏渲染时只会预加载文件, 只有在使用到该组件时才会加载对应的js文件内容, 减少首屏加载的压力。

5.使用require 进行异步加载组件

export default new Router(({
    routes:[
        {
            path:'/login',
            name:'login',
            compontent: resolve => require(['@/views/Login'], resolve)
        },
        {
            path:'/home',
            name:'home',
            compontent:  resolve => require(['@/views/Home'], resolve)
        }
    ]
})

使用require异步加载的方式, 会将组件内容以字符串的形式全部打包在同一个js文件, 当使用到对应的组件时, 再将组件内容解析出来渲染。
和import 组件方式相比也是有很大区别的, require将组件信息当成字符串, 减少了js文件大小, 加快了js文件的编译运行速度。

6.取消预加载

// vue.config.js

module.exports = {
    chainWebpack: config => {
        config.plugins.delete("prefetch") //取消预加载
    }
}