• 请不要在回答技术问题时复制粘贴 AI 生成的内容
kolibreathV
V2EX  ›  程序员

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

  •  
  •   kolibreathV · Aug 30, 2023 · 4965 views
    This topic created in 1168 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

    Vue3 这玩意写的我头痛🙃
    AV1
    AV1
    Aug 30, 2023
    31
    通常来说,同一个文件无论被 import 几次,里面的代码实际上只执行一次。
    并且,所有地方 import 到的模块,都是同一个实例的引用。
    这意味着,如果你 export 一个变量,然后修改它,其他所有模块都能看到这个变量的变化。
    7inFen
    7inFen
    Aug 31, 2023
    32
    import 语法浏览器不认,最后实际在浏览器环境运行的代码会被打包工具如 webpack 优化,前端的打包工具做了很多很多很多的工作。
    另外 import 仅在编译时运行,require 是随代码动态运行的。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   1380 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 103ms · UTC 16:55 · PVG 00:55 · LAX 08:55 · JFK 11:55
    ♥ Do have faith in what you're doing.