当前端应用越来越复杂时，我们想要将代码分割成不同的模块，便于复用、按需加载等。
require 和
import 分别是不同模块化规范下引入模块的语句，下文将介绍这两种方式的不同之处。
1. 出现的时间、地点不同
r path → const path =
require ( 'path' )
r . . / setup → const setup =
require ( '../setup' )
r path . join → const join =
require ( 'path' ) . join
r React → const React =
require ( 'react' )
v path → var path =
require ( 'path' )
i path →
import path from 'path'
i path . join →
import { join } from 'path'
vim进口成本
该插件是Visual Studio Code的插件的（非常粗糙）端口。 简而言之，它计算每个import语句或require调用的包大小。 得益于Neovim的虚拟文本功能，该插件可以在import语句旁边显示计算出的大小，并具有备用功能，可以在临时缓冲区中显示计算出的大小。
该插件提供了一些命令，使您可以根据需要计算软件包的大小。 默认情况下，它将尝试使用Neovim的虚拟文本功能。
此插件使用模块（也是原始import-cost插件的一部分），该模块使用webpack计算导入模块的大小。
您可以在找到有关大小计算过程如何工作的更多信息。
使用您最喜欢的插件管理器来安装此插件。 确保$PATH已安装node （> = 8）和npm并可用。
Plug ' yardnsm/vim-import-cost ' , { ' do ' : ' npm install ' }
如果要以其他方式安装插件，请确保在插件目录的根路径中运行npm install ，以便将安装所需的依赖项。
您可以根据需要启动插件； 它不提供任何开箱即用的自动计算功能。
Babel 7插件可以为节点转换异步import()以同步require() 。 符合。
我将其用于服务器端渲染。
与babel-plugin-dynamic-import-node的区别
babel插件动态导入节点同步
import(SOURCE) => require(SOURCE)
babel插件动态导入节点
import(SOURCE) => Promise.resolve().then(() => require(SOURCE))
$ npm install babel-plugin-dynamic-import-node-sync --save-dev
通过.babelrc （推荐）
.babelrc
" plugins " : [ " dynamic-import-node-sync " ]
通过CLI
$ babel --plugins dynamic-import-node-sync script.js
1. 语法差异：
-
require 是 CommonJS 规范
中提供的语法，通常使用 `
require()` 函数来导入模块，例如 `const module =
require('./module')`。
-
import 是
ECMAScript 模块规范（ES6）
中提供的语法，通常使用 `
import` 关键字来导入模块，例如 `
import module from './module'`。
2. 执行时机：
-
require 是在运行时执行，当代码执行到
require 语句时，才会加载和执行对应的模块。
-
import 是在编译时执行，模块会在编译阶段被静态分析和加载。
3. 动态导入：
-
require 不支持动态导入，即不能根据条件或变量来导入模块。
-
import 支持动态导入，可以根据需要在代码
中动态导入模块。
4. 模块解析：
-
require 会根据模块的路径进行模块解析，可以使用相对路径或绝对路径来引入模块。
-
import 会根据模块的名称进行模块解析，可以使用相对路径、绝对路径或模块名称来引入模块。
对于路由懒加载，通常使用
import 语法进行实现。例如在 Vue.js 项目
中，可以使用以下方式实现路由懒加载：
```
javascript
const Home = () =>
import('./views/Home.vue')
const About = () =>
import('./views/About.vue')
这样在访问对应路由时才会动态加载相应的组件模块，从而实现按需加载，优化应用的加载速度。
