require和import的作用和区别_import和require对项目打包有影响么-优快云博客

本文链接：https://blog.youkuaiyun.com/Niucode/article/details/136688288

本文讲述了require和import在JavaScript中的作用，比较了它们在模块化、运行时加载和浅拷贝/深拷贝方面的特性，以及在前端路由懒加载中的应用，特别强调了CommonJS和ES6模块系统在现代前端框架中的背景。

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

require和import的作用：可以用于代码的模块化和路由懒加载。

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。路由懒加载可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。

使用 require 进行路由懒加载

const Foo = () => require('./components/Foo.vue')
const Bar = () => require('./components/Bar.vue')

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

使用 import 进行路由懒加载

const Foo = () => import('./components/Foo.vue')
const Bar = () => import('./components/Bar.vue')

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

1、require是commonJS规范的模块化语法，import是es6规范的模块化语法；

2、require是运行时加载（可以在js中的任意地方使用），import是编译时加载（只能放到文件的最开头）；

3、require通过module.exports导出的是exports对象，import通过export导出是指定输出的代码；

4、require导入的值被修改时，源对象不会被改变，相当于深拷贝；import导入的对象值被改变时，源对象也会被改变，相当于浅拷贝。

补充：

我们主流的前端框架 vue / react 都是基于 node 来构建的。在NodeJS出现之前，由于没有特别复杂的页面，前端是没有模块化这个概念的，而NodeJS诞生之后，它使用CommonJS的模块化规范。从此，js模块化开始快速发展。因此，我们知道，commonjs就是一个模块化的规范。目前流行的js模块规范有CommonJS、AMD、CMD、UMD以及ES6的模块系统。