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

import 和 require

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

遵循规范

require 是 AMD规范引入方式

import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法

调用时间

import 是在编译时调用,所以必须放在文件开头

requier是在运行时调用,所以require理论上可以运用在代码的任何地方

本质

require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量

import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require

路由加载的理解

未做懒加载的路由写法

import Login from '@/views/Login'

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

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

使用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文件内容, 减少首屏加载的压力。

取消预加载

// vue.config.js

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

通过上面的配置可以取消首屏渲染时对组件js文件的预加载, 实现真正的按需加载

使用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文件, 当使用到对应的组件时, 再将组件内容解析出来渲染。

通过require异步加载方法实现的懒加载虽然也是将组件信息都打包在同一个js文件里, 但是与第一种不进行任何处理直接import 组件方式相比也是有很大区别的, 他将组件信息当成字符串, 减少了js文件大小, 加快了js文件的编译运行速度。