V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
youcanwin8099
V2EX  ›  Vue.js

vue 项目,如果新建了一个文件, 但是后来不用了,但是没有去删掉它,如果这样的文件越来越多,会不会整个工程打包的速度会变慢?

  •  
  •   youcanwin8099 · 2020-04-16 22:16:49 +08:00 · 2989 次点击
    这是一个创建于 1708 天前的主题,其中的信息可能已经有所发展或是发生改变。
    14 条回复    2020-04-20 08:56:04 +08:00
    SunriseFox
        1
    SunriseFox  
       2020-04-16 22:21:23 +08:00
    不会,没有引用的文件不会被打包
    youcanwin8099
        2
    youcanwin8099  
    OP
       2020-04-17 09:58:21 +08:00
    @SunriseFox 引用一般是用什么语句引用进来?不好意思,初学 vue.
    mazai
        3
    mazai  
       2020-04-17 10:00:29 +08:00
    @youcanwin8099 nodejs 的 package.json 会有依赖
    youcanwin8099
        4
    youcanwin8099  
    OP
       2020-04-17 10:16:29 +08:00
    @mazai 但是我写的文件只是一个普通的 vue,谈不上什么组件,不会在 package.json 里定义。
    SunriseFox
        5
    SunriseFox  
       2020-04-17 10:19:05 +08:00 via Android
    @youcanwin8099 import 或者 require
    youcanwin8099
        6
    youcanwin8099  
    OP
       2020-04-17 11:00:28 +08:00
    @SunriseFox 比如我
    import departWindow from './DepartWindow',
    但是我页面里,没有在做任何关于这个 DepartWindow 的事情,那么是不是如果不删掉这个引用,同时也不删掉这个 DepartWindow.vue,那么项目会越来越大?打包越来越慢?
    SunriseFox
        7
    SunriseFox  
       2020-04-17 11:02:16 +08:00
    youcanwin8099
        8
    youcanwin8099  
    OP
       2020-04-17 11:06:52 +08:00
    @SunriseFox 哎!那从某种意义上讲,vue 这种东西,就不适合快速迭代。
    SunriseFox
        9
    SunriseFox  
       2020-04-17 11:14:00 +08:00
    @youcanwin8099 这个其实和 vue 没关系的,而是和 webpack 配置有关系。webpack 可以配置一些 tree shaking 的办法可以帮助移除这些没有引用的代码来减少项目体积(但是会极大地减慢打包速度);为了防止这些没有用到的引用,有 eslint 这样的工具帮忙查找定位,如果需要的话也可以借助工具在打包时自动移除。
    jrtzxh020
        10
    jrtzxh020  
       2020-04-17 11:17:38 +08:00 via iPhone
    @youcanwin8099 使用 eslint 可以避免出现这种问题
    youcanwin8099
        11
    youcanwin8099  
    OP
       2020-04-17 11:23:20 +08:00
    “减少了项目体积“,”但是会极大地减慢打包速度?”
    使用 eslint 时,应该只是不打包它,但是不会物理删除这个 DepartWindow.vue 吧?
    ljwrer
        12
    ljwrer  
       2020-04-17 13:48:45 +08:00
    如果使用了 async import 可能会索引到,减慢打包速度
    SilentDepth
        13
    SilentDepth  
       2020-04-17 17:24:42 +08:00
    以 Webpack 为例,build 时它会从入口模块开始一个个分析 require/import 语句,被引用到的模块会被纳入构建分析范围,这里是会影响构建速度的。

    如果你在某个被引用的模块里 import 了 DepartWindow.vue ,那么它就被纳入构建分析范围,理论上会增加构建耗时。至于影响多大,取决于模块体积(比如代码内容越多分析过程越长)、构建优化手段(比如可以直接静态分析 vue 模块就不需要 vue-loader 工作了)。

    ESLint 可以在开发阶段提示未被实际使用的依赖。如果可能,最好在一开始就移除这些未使用依赖。但实际地说,除非这种情况非常多,或者文件内容非常大,通常对构建性能没有太大影响。
    zhwithsweet
        14
    zhwithsweet  
       2020-04-20 08:56:04 +08:00
    @youcanwin8099 #11 那肯定啊,假如一个框架不经过你的允许,就自动删除你的文件。你敢用吗?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1612 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:50 · PVG 00:50 · LAX 08:50 · JFK 11:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.