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

vue 文件多了, webpack 热加载很慢?

  •  
  •   yantianqi · 2018-04-21 09:46:40 +08:00 · 14483 次点击
    这是一个创建于 2168 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有什么解决办法吗?

    40 条回复    2018-04-22 21:59:11 +08:00
    panyanyany
        1
    panyanyany  
       2018-04-21 09:59:00 +08:00
    这个慢是指有多慢呢?
    murmur
        2
    murmur  
       2018-04-21 10:00:20 +08:00
    多是指多多呢
    我感觉如果 hmr 在 5 秒内能刷新出来我都不会去管他
    boqiao
        3
    boqiao  
       2018-04-21 10:05:35 +08:00
    dll 拆分库
    vue 加缓存
    使用 HappyPack
    duan602728596
        4
    duan602728596  
       2018-04-21 10:08:33 +08:00 via iPhone
    升级到 webpack4,webpack4 的构建速度大幅度提升
    duan602728596
        5
    duan602728596  
       2018-04-21 10:10:15 +08:00 via iPhone
    还有 babel-loader 也要使用缓存
    yantianqi
        6
    yantianqi  
    OP
       2018-04-21 10:20:58 +08:00
    @panyanyany
    @murmur
    大概 10s 以上吧?
    dnxbf321
        7
    dnxbf321  
       2018-04-21 10:57:07 +08:00
    webpack entry 过滤一下,不相干的不要进入编译
    mooo
        8
    mooo  
       2018-04-21 11:03:53 +08:00
    热加载不是只构建修改的吗,10s 的话应该是配置不对。 把没修改的也重新构建了
    RaymondYip
        9
    RaymondYip  
       2018-04-21 11:06:40 +08:00
    dll
    缓存
    resolve 配置
    webpack analyze 看有啥库文件打包特别耗时间
    Veigar
        10
    Veigar  
       2018-04-21 11:21:23 +08:00   ❤️ 1
    react 了解一下
    klesh
        11
    klesh  
       2018-04-21 12:15:35 +08:00 via Android
    我遇到过是 npm 装的包有问题 hmr 要 20s 左右,用 yarn 重装一下,下降到 2s 多。试一下?
    h1367500190
        12
    h1367500190  
       2018-04-21 14:36:46 +08:00   ❤️ 2
    @Veigar 不太明白 V2EX 上遍地这种回复有什么意义,人家问 Vue 的问题叫人转 react,问 JAVA 问题又搬出 C,问安卓问题又说苹果怎么怎么样。。。
    h1367500190
        13
    h1367500190  
       2018-04-21 14:40:15 +08:00
    @dnxbf321 感觉他是因为没有拆分模块导致的整个应用重载或大面积重载
    codermagefox
        14
    codermagefox  
       2018-04-21 15:11:06 +08:00   ❤️ 1
    点我最近刚好在看 webpack,如果楼主时间多可以去我博客看一下 webpack 相关的三篇文章,不要脸的放一下博客

    http://note.codermagefox.com/blog/magefox

    如果时间不够只是想解决这个问题,那么我尝试正儿八经回答一下。优先级从上到下依次排列:

    0.代码中是否有过多实例?
    1.把 webpack 升级到 4.0。
    2.优化 entrys.。
    3.使用 DLLplugin,happypack 等构建加速插件。
    4.检查 loader/eslint 是否配置错误 /不合理.
    5.根据开发 /生产环境配置不同的 webpack 流程,或者使用 webpack4.0 的 mode 进行处理
    6.babel 是否 exclude 掉了 node_modules,是否开启了 cacheDirectory
    7.resolve 的文件夹是否过多?
    8.是否使用 HMR 替换了 HotReload?
    9.loader 是否正确的配置了生命周期且只干了必须要干的活?
    10.是否使用了过多无必要的插件?
    11.是否开启了 uglifyjs-webpack-plugin 的 cache ?

    做完以上检查,如果还不行,那大概是没救了(
    Kongtou
        15
    Kongtou  
       2018-04-21 15:12:52 +08:00
    现在前端都是什么些废物工具,webpack 热加载?不会连个缓存都没有吧?
    zzNucker
        16
    zzNucker  
       2018-04-21 15:14:24 +08:00   ❤️ 1
    @Kongtou 不懂哔哔啥? 你这种人当后端也是废物一个
    codermagefox
        17
    codermagefox  
       2018-04-21 15:15:39 +08:00   ❤️ 2
    @Kongtou #15 兄弟,diss 前端确实是政治正确,不过我觉得解决问题比较重要,你认为呢
    Kongtou
        18
    Kongtou  
       2018-04-21 15:18:03 +08:00
    @zzNucker #16 我不懂?呵呵
    mooo
        19
    mooo  
       2018-04-21 17:17:12 +08:00
    @Kongtou 你确定不懂, 这东西的热加载其实就是增量构建, 和缓存没关系...........................
    hronro
        20
    hronro  
       2018-04-21 17:24:54 +08:00
    你是没遇到我这种。热加载用了 5 分钟,生产环境在 CI 上构建,跑了一个小时没跑完,直接超时了。
    Kongtou
        21
    Kongtou  
       2018-04-21 17:55:21 +08:00
    @mooo #19 增量构建还能卡,知道为什么卡吗?
    mooo
        22
    mooo  
       2018-04-21 18:07:47 +08:00
    @Kongtou 增量当然不卡, 估计他设置有问题 没修改的文件也重新构建了
    sunzongzheng
        23
    sunzongzheng  
       2018-04-21 18:45:06 +08:00 via Android
    @Kongtou 留个 github 让我瞻仰下你写的是不是废物中的极品?
    xi_lin
        24
    xi_lin  
       2018-04-21 19:04:00 +08:00
    多 entry 多 output 吗?
    可以试试 html-webpack-plugin-multihtml
    Kongtou
        25
    Kongtou  
       2018-04-21 19:05:42 +08:00
    @sunzongzheng #23 兄弟,生气了?说到痛处了?
    sunzongzheng
        26
    sunzongzheng  
       2018-04-21 19:10:24 +08:00 via Android
    @Kongtou 是你怕留了被戳到痛处吧,xiong dei ?
    Kongtou
        27
    Kongtou  
       2018-04-21 19:13:13 +08:00
    @sunzongzheng #26 给你你看得懂吗,还是好好学习 js 吧
    sunzongzheng
        28
    sunzongzheng  
       2018-04-21 19:21:04 +08:00 via Android
    @Kongtou 我提醒你看看自己的 github 以后,是不是感觉还是不要随便评论的好?
    end
    Kongtou
        29
    Kongtou  
       2018-04-21 19:25:11 +08:00
    @sunzongzheng #28 真是个人才,你自己的 github 搓,怎么?我也跟你一样啊
    sunzongzheng
        30
    sunzongzheng  
       2018-04-21 19:27:48 +08:00 via Android
    @Kongtou 我搓我夹着尾巴,你倒是让我看看你的水平够不够 diss 前端的所有工具啊?我提醒你以后,内心是不是感觉很虚?
    Kongtou
        31
    Kongtou  
       2018-04-21 19:32:26 +08:00
    @sunzongzheng #30 呵呵,你仿佛在搞笑? 我需要向一个夹着尾巴的_证明什么?
    sunzongzheng
        32
    sunzongzheng  
       2018-04-21 19:38:36 +08:00 via Android
    @Kongtou 简单的说吧,你觉得前端的工具都是废物,我就想看看你是不是废物中的极品
    Kongtou
        33
    Kongtou  
       2018-04-21 19:41:20 +08:00
    @sunzongzheng #32 你的逻辑很混乱,看来你确实适合做前端
    chemzqm
        34
    chemzqm  
       2018-04-21 19:42:08 +08:00
    webpack 热加载很慢? 你大概是每次都全部重编译吧,那不叫热加载,热加载通常不会超过 1s
    sunzongzheng
        35
    sunzongzheng  
       2018-04-21 19:48:19 +08:00 via Android
    @Kongtou 键盘侠说的就是你这种了,说话不用负责,随便喷。interesting
    GooMS
        36
    GooMS  
       2018-04-21 20:04:37 +08:00 via Android
    一些人基本的礼貌都没有了,是因为互联网让他戴上了面具吗
    zhwithsweet
        37
    zhwithsweet  
       2018-04-21 21:20:37 +08:00
    如果不做多页,可以考虑 parcel。我最近自己搭了 vue 和 react 的脚手架,目前速度是很快的。但是生产还是 vue-cli,升级到 vue-cli3beta 版本,编译速度提高很快。parcel1.7 好像原生支持 vue 了。

    vue: https://github.com/zouhangwithsweet/xiezhewan/tree/master/parcel
    react: https://github.com/zouhangwithsweet/mini-react/tree/master/react-music
    stzz
        38
    stzz  
       2018-04-21 21:33:59 +08:00   ❤️ 1
    菜市场吗
    zhangyu911013
        39
    zhangyu911013  
       2018-04-22 07:59:21 +08:00
    webpack 的 config 里面 devServer 有设置 hot:true 吗,之前没设置都是重新加载,后来弄上去才是热加载。。
    现在我的碰到一个问题是可能 entry 过多,每次修改代码保存 webpack 都会静默编译失败,也不报错,output 的 js 全部消失,网上好像也没找到解决方案,头疼。。
    dnxbf321
        40
    dnxbf321  
       2018-04-22 21:59:11 +08:00
    webpack 又升级了,回头我也去升级一下公司的工具,后台管理系统代码量太多,编译起来贼慢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3077 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 14:35 · PVG 22:35 · LAX 07:35 · JFK 10:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.