vue 组件懒加载 import require

最新推荐文章于 2025-05-09 23:28:10 发布

原创最新推荐文章于 2025-05-09 23:28:10 发布 · 1.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #node.js #javascript

个人学习专栏收录该内容

29 篇文章

订阅专栏

本文介绍了Vue组件懒加载的原因，旨在提高单页应用的加载效率。内容包括import/export与require/exports的区别，以及在Vue中如何实现懒加载，特别是通过webpack的路径变量拼接、箭头函数和process.env.NODE_ENV的使用。同时，文章解释了在不同模块系统下require和import的用法，以及如何处理.vue文件中的默认导出。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用懒加载原因：

像vue这种（spy）单页面应用，如果没有使用到懒加载，webpack打包的文件过大，造成进入首页时，加载的资源过多，时间过长，即使做了loading也不利于用户体验，而运用懒加载可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载事件，简单来说就是进入首页不用一次加载过多资源造成时间过长

问题背景(v-cli版本2.96)：

路由懒加载在开发阶段的时候，随手改一行代码热更新都是要几千ms，导致等待过长。这里是异步加载导致 webpack 每次的 cache 失效了，所以每次的rebuild 才会这么的慢。

知识点概要：

1.import/export与require/exports 区别

require/exports 是运行时动态加载，import/export 是静态编译。

CommonJS 加载的是一个对象（即 module.exports 属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。- 阮一峰

2.懒加载 require和import（）的区别

import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是可异步也可同步加载。

ps:require(['xx.js']，function(){})是异步加载,require('xx.js') 同步加载,关键在于第一个参数是否为数组以及第二个回调函数

解决方案：
1 webpack的路径使用变量拼接，必须预先给出一个相对路径，然后把具体的组件路径在传入

2 用一个箭头函数，将需要传入的组件名或者相对路径传入

3 用process.env.NODE_ENV确定使用哪种加载方式

// router/index.js 
const _import = require('./_import_' + process.env.NODE_ENV)

//使用时
 {
      path: '/',
      name: 'HelloWorld',
      component: _import('HelloWorld')
    },
    
// router/_import_development.js
module.exports = file => require('@/views/' + file + '.vue').default // vue-loader at least v13.0.0+

// router/_import_production.js 如果你加载的vue不是这个路径 请自定义哦
module.exports = file => () => import('@/views/' + file + '.vue')

这里针对module.exports = file => require('@/views/' + file + '.vue').default进行说明

webpack 打包时支持 CommonJS、AMD 和 ES6 的模块化系统。我们通常写 .vue 单文件组件时，在 script 语言块中使用的是 ES6 的语法，使用 export default 进行默认导出。require 是 CommonJS（和 AMD，想不到吧？）的模块导入方式，不支持模块的默认导出，因此导入的结果其实是一个含 default 属性的对象，因此需要使用 .default 来获取实际的组件选项。或者使用 ES6 的 import 语句，ES6 的模块化导入导出语法参见 http://es6-features.org/#Valu...，import 时需要给定一个变量名，所有 import 语句必须统一放在模块的开头。

如果 .vue 文件中使用的本来就是 CommonJS 或者 AMD 的模块化系统语法，导出的是 module.exports 对象作为组件选项，那么使用 require 导入时就不需要使用 .default 来获取。

学习来源：

https://www.jianshu.com/p/ddf574f4e290?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

https://segmentfault.com/q/1010000011171159

https://blog.youkuaiyun.com/wenmin1987/article/details/108838348?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control