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文件的编译运行速度。
