V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
kolibreathV
V2EX  ›  程序员

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

  •  
  •   kolibreathV · 2023-08-30 08:42:20 +08:00 · 3472 次点击
    这是一个创建于 449 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    32 条回复    2023-08-31 19:03:49 +08:00
    dream4ever
        1
    dream4ever  
       2023-08-30 08:45:47 +08:00   ❤️ 1
    个人提一点离题的意见,新手没必要看源码,不如先把库/框架用熟,把开发效率提上来,后面有闲工夫了再研究源码啥的。
    linshuizhaoying
        2
    linshuizhaoying  
       2023-08-30 08:47:10 +08:00
    新手别问效率 前端谈这些基本没啥用,你要谈的是开发效率 如何更快出货
    Imindzzz
        3
    Imindzzz  
       2023-08-30 08:53:16 +08:00 via Android
    先学习下 node 模块和 webpack
    nevermoreluo
        4
    nevermoreluo  
       2023-08-30 09:13:26 +08:00   ❤️ 1
    import 不确定,reqire 是有 cache 的,类似脚本语言 python ,lua 等包导入都有导入模块的全局缓存
    第一次缓存 miss -> path finding -> load
    第二次就是缓存命中直接返回了
    enchilada2020
        5
    enchilada2020  
       2023-08-30 09:14:10 +08:00 via Android
    不会 只有一次
    touchmii
        6
    touchmii  
       2023-08-30 09:16:11 +08:00 via Android
    js 项目编译后 import 就会被实际用到的代码替换,你这种你说的这种只是 debug 下情况,不用瞎操心。
    libasten
        7
    libasten  
       2023-08-30 09:20:53 +08:00
    搭车问一下,同是 vue 项目,有两三个比较大的 json 数据文件,大约 10M 左右,需要在 vue 页面组件中使用,都通过 import 方式引入到组件中。
    现在这个组件特别卡顿,是这几个 import 文件太大导致的吗?
    一般有什么优化思路呢?
    lizhenda
        8
    lizhenda  
       2023-08-30 09:25:18 +08:00
    @libasten 改成 http 请求
    eatgrass
        9
    eatgrass  
       2023-08-30 09:28:02 +08:00
    @libasten
    异步加载
    拆分 chunk
    本地缓存
    xujinkai
        10
    xujinkai  
       2023-08-30 09:29:06 +08:00 via Android
    import 只在第一次调用时执行一遍文件,也就是 export 出来的变量天生是单例的。
    ljsh093
        11
    ljsh093  
       2023-08-30 10:18:07 +08:00
    打包工具会解决重复导入的问题
    libasten
        12
    libasten  
       2023-08-30 10:22:07 +08:00
    @lizhenda http 请求会解决 vue 组件上控件操控的卡顿? import 和 http 的区别是什么?我理解的都要缓存到本地?但是 import 是“注入”到对象属性里面了?
    mdn
        13
    mdn  
       2023-08-30 10:22:53 +08:00
    @libasten 动态 import()
    BUHeF254Lpd1MH06
        14
    BUHeF254Lpd1MH06  
       2023-08-30 10:30:32 +08:00
    @libasten 也可以使用 service worker
    mdn
        15
    mdn  
       2023-08-30 10:31:16 +08:00
    参考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import

    ES6 标准中,import 引入的模块是地址引用
    Outclass
        16
    Outclass  
       2023-08-30 10:39:17 +08:00
    过早优化是万恶之源。[手动滑稽]
    mdn
        17
    mdn  
       2023-08-30 10:43:28 +08:00
    1. import 命令是编译阶段执行的,在代码运行之前
    2. import 语句是 Singleton 模式
    zhangxingliang
        18
    zhangxingliang  
       2023-08-30 10:50:41 +08:00
    @libasten 1. dom 元素过多卡顿 2. json 转成的对象太大遍历卡顿
    liuzhifei
        19
    liuzhifei  
       2023-08-30 11:30:41 +08:00
    我的前端编程工作经历中,最坑人的就是考虑性能。
    只有当你实际操作觉得卡顿,再去考虑性能,不然没意义。
    react 性能不如 vue ,但是比 vue 火太多了。
    react 源码中很多都不是性能最优的代码
    4771314
        20
    4771314  
       2023-08-30 11:43:22 +08:00
    @libasten 10M 的 json ,你用浏览器或者 vs code 打开看下卡不卡?
    单纯就是文件太大了
    ivslyyy
        21
    ivslyyy  
       2023-08-30 11:58:40 +08:00
    Singleton ?
    fason1995
        22
    fason1995  
       2023-08-30 14:07:51 +08:00
    @mdn MDN 列举的形式是真的多
    Mexion
        23
    Mexion  
       2023-08-30 14:12:38 +08:00
    你当规范设计者是傻子啊,这种问题难道没考虑过吗,如果有问题还需要你来提?只能说别太操心
    mxT52CRuqR6o5
        24
    mxT52CRuqR6o5  
       2023-08-30 14:14:12 +08:00
    模块是单例的,这么说你明白吗
    n18255447846
        25
    n18255447846  
       2023-08-30 14:37:01 +08:00
    不会。打包工具会基于 ast 生成依赖树
    n18255447846
        26
    n18255447846  
       2023-08-30 14:39:37 +08:00
    @libasten devtools->Performance 里录制一段时间,看什么地方耗时
    iOCZ
        27
    iOCZ  
       2023-08-30 14:42:39 +08:00
    import 是静态编译,只会引入用到的东西。require 是动态加载,会做 cache 。
    kolibreathV
        28
    kolibreathV  
    OP
       2023-08-30 17:00:36 +08:00
    @Mexion 😊
    AsuorZ
        29
    AsuorZ  
       2023-08-30 17:11:05 +08:00
    对比下 require
    ipcjs
        30
    ipcjs  
       2023-08-30 21:07:25 +08:00
    建议丢掉 vue ,写 react

    Vue3 这玩意写的我头痛🙃
    DOLLOR
        31
    DOLLOR  
       2023-08-30 22:23:39 +08:00
    通常来说,同一个文件无论被 import 几次,里面的代码实际上只执行一次。
    并且,所有地方 import 到的模块,都是同一个实例的引用。
    这意味着,如果你 export 一个变量,然后修改它,其他所有模块都能看到这个变量的变化。
    7inFen
        32
    7inFen  
       2023-08-31 19:03:49 +08:00
    import 语法浏览器不认,最后实际在浏览器环境运行的代码会被打包工具如 webpack 优化,前端的打包工具做了很多很多很多的工作。
    另外 import 仅在编译时运行,require 是随代码动态运行的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1129 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 18:38 · PVG 02:38 · LAX 10:38 · JFK 13:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.