前端新手，想问问关于 import 命令执行的效率问题?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 485 天前的主题，其中的信息可能已经有所发展或是发生改变。

之前没有写过前端，现在临时开始学习并且编码。简单学习了一下 Vue ，看了下项目代码和 vue.js 源码心中有些疑惑. 首先我先抛出一下我现在的理解，如果理解错误请大家指正下：

vue.js 是一个很大的立刻执行函数，最后 return Vue 的构造函数。在vue._init()函数中会将 Vue 函数放到 window 上，这样全局都可以使用
import 命令每次都会执行对应模块的代码

我看到在项目的很多地方都会 import Vue ，然后做Vue.use()等操作，那这样会不会因为 import 反复执行 vue.js?

Vue

import

函数

执行

32 条回复 • 2023-08-31 19:03:49 +08:00

dream4ever

2023-08-30 08:45:47 +08:00

个人提一点离题的意见，新手没必要看源码，不如先把库/框架用熟，把开发效率提上来，后面有闲工夫了再研究源码啥的。

linshuizhaoying

2023-08-30 08:47:10 +08:00

新手别问效率前端谈这些基本没啥用，你要谈的是开发效率如何更快出货

Imindzzz

2023-08-30 08:53:16 +08:00 via Android

先学习下 node 模块和 webpack

nevermoreluo

2023-08-30 09:13:26 +08:00

import 不确定，reqire 是有 cache 的，类似脚本语言 python ，lua 等包导入都有导入模块的全局缓存
第一次缓存 miss -> path finding -> load
第二次就是缓存命中直接返回了

enchilada2020

2023-08-30 09:14:10 +08:00 via Android

不会只有一次

touchmii

2023-08-30 09:16:11 +08:00 via Android

js 项目编译后 import 就会被实际用到的代码替换，你这种你说的这种只是 debug 下情况，不用瞎操心。

libasten

2023-08-30 09:20:53 +08:00

搭车问一下，同是 vue 项目，有两三个比较大的 json 数据文件，大约 10M 左右，需要在 vue 页面组件中使用，都通过 import 方式引入到组件中。
现在这个组件特别卡顿，是这几个 import 文件太大导致的吗？
一般有什么优化思路呢？

lizhenda

2023-08-30 09:25:18 +08:00

@libasten 改成 http 请求

eatgrass

2023-08-30 09:28:02 +08:00

@libasten
异步加载
拆分 chunk
本地缓存

xujinkai

2023-08-30 09:29:06 +08:00 via Android

import 只在第一次调用时执行一遍文件，也就是 export 出来的变量天生是单例的。

ljsh093

2023-08-30 10:18:07 +08:00

打包工具会解决重复导入的问题

libasten

2023-08-30 10:22:07 +08:00

@lizhenda http 请求会解决 vue 组件上控件操控的卡顿？ import 和 http 的区别是什么？我理解的都要缓存到本地？但是 import 是“注入”到对象属性里面了？

mdn

2023-08-30 10:22:53 +08:00

@libasten 动态 import()

BUHeF254Lpd1MH06

2023-08-30 10:30:32 +08:00

@libasten 也可以使用 service worker

mdn

2023-08-30 10:31:16 +08:00

参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import

ES6 标准中，import 引入的模块是地址引用

Outclass

2023-08-30 10:39:17 +08:00

过早优化是万恶之源。[手动滑稽]

mdn

2023-08-30 10:43:28 +08:00

1. import 命令是编译阶段执行的，在代码运行之前
2. import 语句是 Singleton 模式

zhangxingliang

2023-08-30 10:50:41 +08:00

@libasten 1. dom 元素过多卡顿 2. json 转成的对象太大遍历卡顿

liuzhifei

2023-08-30 11:30:41 +08:00

我的前端编程工作经历中，最坑人的就是考虑性能。
只有当你实际操作觉得卡顿，再去考虑性能，不然没意义。
react 性能不如 vue ，但是比 vue 火太多了。
react 源码中很多都不是性能最优的代码

4771314

2023-08-30 11:43:22 +08:00

@libasten 10M 的 json ，你用浏览器或者 vs code 打开看下卡不卡？
单纯就是文件太大了

ivslyyy

2023-08-30 11:58:40 +08:00

Singleton ？

fason1995

2023-08-30 14:07:51 +08:00

@mdn MDN 列举的形式是真的多

Mexion

2023-08-30 14:12:38 +08:00

你当规范设计者是傻子啊，这种问题难道没考虑过吗，如果有问题还需要你来提？只能说别太操心

mxT52CRuqR6o5

2023-08-30 14:14:12 +08:00

模块是单例的，这么说你明白吗

n18255447846

2023-08-30 14:37:01 +08:00

不会。打包工具会基于 ast 生成依赖树

n18255447846

2023-08-30 14:39:37 +08:00

@libasten devtools->Performance 里录制一段时间，看什么地方耗时

iOCZ

2023-08-30 14:42:39 +08:00

import 是静态编译，只会引入用到的东西。require 是动态加载，会做 cache 。

kolibreathV

2023-08-30 17:00:36 +08:00

@Mexion 😊

AsuorZ

2023-08-30 17:11:05 +08:00

对比下 require

ipcjs

2023-08-30 21:07:25 +08:00

建议丢掉 vue ，写 react

Vue3 这玩意写的我头痛🙃

DOLLOR

2023-08-30 22:23:39 +08:00

通常来说，同一个文件无论被 import 几次，里面的代码实际上只执行一次。
并且，所有地方 import 到的模块，都是同一个实例的引用。
这意味着，如果你 export 一个变量，然后修改它，其他所有模块都能看到这个变量的变化。

7inFen

2023-08-31 19:03:49 +08:00

import 语法浏览器不认，最后实际在浏览器环境运行的代码会被打包工具如 webpack 优化，前端的打包工具做了很多很多很多的工作。
另外 import 仅在编译时运行，require 是随代码动态运行的。