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

升级 webpack 5 遇到的坑,果然过早的优化是万恶之源

  •  
  •   einsdisp · 77 天前 · 2648 次点击
    这是一个创建于 77 天前的主题,其中的信息可能已经有所发展或是发生改变。

    目前有若干前端项目,2 年前的时候抽象出了一个用于构建的工具包 boilerplate (类似 create-react-app 这种),当时用的 webpack 4,大概各种构建工具使用的版本现在比较老了,每次安装 /升级包的时候,npm 就提示有两百多个漏洞

    found 2xx low severity vulnerabilities

    这么多漏洞,可能其实并没有啥危害,但对于强迫症而言,就是看着不爽。关键很多漏洞要解决的话,根据 npm audit 提示,很多包必须升级大版本号,特别是要升级到 webpack v5 。

    近期正好要修改 boilerplate 包,添加一些功能,于是一派脑门,打算干脆一不做二不修,升级到 webpack v5,结果折腾两天,发现有很多的插件 /工具尚不支持 webpack 5,或者有 bug,或者是声明的 dependencies/peerDependencies 仍然绑定着 v4 版本的 webpack 或者 @types/webpack 。

    然后才想起来,看了下 create-react-app 的 issue,发现这种级别的项目也还没完全支持 webpack 5 呢: https://github.com/facebook/create-react-app/issues/9994 (看这个 issue,还有一些工作没完成呢)

    看来 webpack5 的生态还不完善,不想当小白鼠,花费太多时间在工具链的配置 /升级上毫无意义,而且 webpack v5 的新特性也没啥刚需,目前 v4 下,构建时间也还可以。于是果断放弃,继续用回 webpack 4,两天时间白费力,郁闷。果然过早的优化是万恶之源,v5 去年 10 月发布正式版,现在升级到 v5 还是太早了,估计至少等一年生态系统才会比较完善。

    这个时候就显示出 golang 的好处了,golang 的生态环境,很少出现 python2 vs python3,webpack4 vs webpack5 的这种大的割裂。大多数时,可以无脑升级大版本号。

    28 条回复    2021-04-01 13:00:45 +08:00
    Shook
        1
    Shook   77 天前
    然后等版本稳定了,webpack6 就要出来了。
    这和买游戏机的逻辑差不多。
    LokiSharp
        2
    LokiSharp   77 天前
    golang 还年轻 还没出 2
    einsdisp
        3
    einsdisp   77 天前
    @Shook 对的,其实这样挺好,软件包总是使用次大版本号,保证足够稳定(如果最新大版本号没有刚需功能的话)。像很多服务器发行版,里面的软件就挺老的。
    einsdisp
        4
    einsdisp   77 天前
    @Shook 游戏机跟生产力软件不是一回事。购买最新的游戏机,哪怕有些游戏无法运行 /没有适配也无所谓,等等就行,晚玩几天死不了。生产力软件乱升大版本号,导致其依赖的其他软件 /插件失效或者不稳定,是要命的。这就是使用次大版本号的好处
    einsdisp
        5
    einsdisp   77 天前
    @LokiSharp golang 2 只是个代号(类似 alpha/next 这种含义),很可能永远不会出 v2
    chenqh
        6
    chenqh   77 天前
    那是因为 golang 基本没有语法变动,但是不代表 golang 的第三方库可以无脑升大版本呀
    einsdisp
        7
    einsdisp   77 天前
    @chenqh 嗯。第三方库升级大版本的话,就算不是无脑升级,一般 API 改动也不会太大,需要调整的代码也很少。很少出现 webpack v4 v5 这种牵一发而动全身的事情。

    golang 语言本身就是奉行极简主义,如无必要误增实体。影响这第三方库也大体如此。我对比过很多相同定位的 python 库与 golang 库,golang 的库功能简略的多。

    大概 golang 的第三库本身就很极简,所以升级大版本号非常平滑。
    duan602728596
        8
    duan602728596   77 天前
    现在常用的 loader 和 plugin 已经支持 webpack5 了。给我自己项目用的搞的脚手架和我们项目用的 umi,升级到 webpack5 后都没有问题。有问题的有可能是 loader 和 plugin 本身 api 的变化。

    声明 webpack4 的,有些是已经废弃的,可能是 webpack 已经内置的功能,有些是不需要升级的,没有用到 webpack 已经废弃的 api,所以兼容 webpack5 。在 ts 编译时忽略错误即可。

    webpack5 的 top-level-await 、Module Federation 、filesystem cache 等都很有用,并且编译速度真的是大幅度提升,我们的项目编译时间从 4 分钟缩短到 2 分钟内,在 docker 内的打包时间从 10 分钟降低到 3 分钟。
    wangkun025
        9
    wangkun025   77 天前
    前端是噩梦。
    einsdisp
        10
    einsdisp   77 天前
    @duan602728596

    嗯嗯,常见的 loader 与插件很多已经支持 v5 。不幸我的这脚手架用了一个比较小众的插件“error-overlay-webpack-plugin”,是从 create-reate-app 中提取出来的,开发的时候可以直接在页面看到前端代码的错误提示,感觉挺方便的(不同于 webpack 的 overlay,那个只能显示 webpack 自身的编译错误)

    昨天还去这个插件的 issues 里看了下,尚不支持 v5,因为上游的 create-reate-app 也还没完全迁移到 v5
    mcfog
        11
    mcfog   77 天前   ❤️ 2
    你好,golang 并不无脑
    支持 gomod 的不支持 gomod 的,protobuf 新老两个版本的,grpc 几次不兼容升级的
    etcd 和 grpc 不是左边不对就是右边不对,至今用着毛子的 fork
    leelz
        12
    leelz   77 天前
    最近也在干升级 webpack5,还算平滑。踩到的坑基本都能搜得到解决办法。升级 mini-css-extract-plugin 这个就能干掉很多 warning 了
    anonydmer
        13
    anonydmer   77 天前
    脚本语言的升级就没有一个让人省心的
    LiuJiang
        14
    LiuJiang   77 天前
    亲,这边建议您使用 Vite 或 Snowpack 代替呢。
    lewinlan
        15
    lewinlan   77 天前 via Android
    泛型都是 1.1x 了,估计职业生涯内 go 是不会 breaking change 了
    fuis
        16
    fuis   77 天前   ❤️ 1
    看完全文我也不知道你到底在优化什么
    Jirajine
        17
    Jirajine   77 天前 via Android
    你说 golang 简单,实际上你的项目如果深度定制了 webpack,那是你的项目本身复杂。
    很多 webpack 特有的、深度定制的各种功能、插件其实是不必要的,如果你奉行所谓 golang 那种保持简单理念组织项目结构,那么完全可以不用 webpack,直接用 parcel/rollup/snowpack 这些无痛的、简单的方案就可以了。
    shawn102400
        18
    shawn102400   77 天前
    golang 体现好处个鬼,golang 的坑比其他语言都多,实在是人力不够填不完罢了。golang2.0 都计划 5 年了,还没搞出来,就泛型和异常处理这两个坑,至少填几年。
    gzwgq222
        19
    gzwgq222   76 天前 via iPhone
    最近也在升级 webpack5,也碰到了一些问题。比如会去编译组件说明的 markdown 文件,提示 md 语法错误,还没抽时间去查原因。虽然 V4 的构建速度已经优化一波了,大约提升了 70%~80%,但还是想试试 V5 。
    bojackhorseman
        20
    bojackhorseman   76 天前 via iPhone
    借楼问一下,怎么熟练掌握 webpack 啊。平常做项目都是脚手架一把梭。离了脚手架就成了智障,但对于前端而言,还是想多了解一下的,看官方文档,内容很多概念也很繁复,老实说,并不能很有效的理解。
    Sparetire
        21
    Sparetire   76 天前 via Android
    大版本升级本来就是会有 breaking change 的,你对大版本升级的期望是无脑升,我一时竟不知道是谁有问题。。
    标题说过早优化,通常我们说过早优化是形容优化代码,整篇洋洋洒洒看下来也没看见和优化代码有什么关系
    WillBC
        22
    WillBC   76 天前
    webpack 的学习和使用体验就是 💩,node 的生态环境也是。
    byte10
        23
    byte10   76 天前
    @WillBC 头大,golang 和 node 其实很像的,就是轮子多,小猫小狗都可以搞轮子。
    sjhhjx0122
        24
    sjhhjx0122   76 天前
    自从用了 vite 就回不去了
    fulvaz
        25
    fulvaz   76 天前
    不要方, 等到 lts 的最后一天升级也不迟
    yaphets666
        26
    yaphets666   76 天前
    干了快 3 年前端了.越来越觉得前端是一团迷雾,多得是不知道的坑.有些想转 java 了
    ezreal
        27
    ezreal   76 天前
    vite 方便多了
    dany813
        28
    dany813   76 天前
    利好 vite
    关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2400 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 11:59 · PVG 19:59 · LAX 04:59 · JFK 07:59
    ♥ Do have faith in what you're doing.