V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
slucus
V2EX  ›  问与答

webpack 3 合并 chunk 巨慢无比

  •  
  •   slucus · 2019-09-21 19:55:24 +08:00 · 1793 次点击
    这是一个创建于 1884 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目越来越大,使用 webpack 打出来的 chunk 高达 400 多个,为了优化请求数量,使用 webpack.optimize.LimitChunkCountPlugin 将 chunk 控制在了 12 个,但这样造成了一个问题,每次打包花在这上面的时间居然要将近 40 分钟。。。。

    找了一圈也没有什么好的替代方案,各位大佬,有什么建议么?[抱拳了]

    5 条回复    2020-06-24 17:48:36 +08:00
    noe132
        1
    noe132  
       2019-09-21 20:12:58 +08:00
    40 分钟是真的 niupi。

    几个建议
    升级 webpack4
    使用 speed-measure-webpack-plugin 看看到底哪个 loader 慢
    使用 webpack-bundle-analyzer 看看那些 module 是不需要的
    是否使用了 import()而且使用的是非静态字符串,如 import(`path/${folder}/hi.js`)
    silaike
        2
    silaike  
       2019-09-21 22:17:45 +08:00 via iPhone
    exclude node_modules 了吗
    slucus
        3
    slucus  
    OP
       2019-09-23 11:19:43 +08:00
    现在问题已经定位到了。就是因为项目比较大,当时设计的时候为了后续维护方便,拆分了较多的 components,所以导致打包出来了 400 多个 js。。。

    然后问题来了,当我们使用 webpack.optimize.LimitChunkCountPlugin 进行 js 合并的时候,就变动巨慢无比,想找个多进程的合并方法,但目前网上好像也没有这块相关的问题
    slucus
        4
    slucus  
    OP
       2019-09-23 11:22:14 +08:00
    @noe132 升级也考虑过,但成本太大了,而且会有额外的风险( 因为现在项目已经上线了 )
    slucus
        5
    slucus  
    OP
       2020-06-24 17:48:36 +08:00
    这个问题基本上算是解决了。
    原因:使用了 import 的方式注册组件 ` () => import() `,使用这种方式,在打包的时候,会把组件打成单独的文件。项目初期这样是没什么问题的,但项目越来越大,组件越来越多。所以就会打出几百个单独的文件,但为了做请求优化,又要把这个几百个文件合并成 10 个左右,所以打包速度成倍增长。

    解决方法:使用 require 注册组件。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5599 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 06:03 · PVG 14:03 · LAX 22:03 · JFK 01:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.