webpack 3 合并 chunk 巨慢无比

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1879 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

5 条回复 • 2020-06-24 17:48:36 +08:00

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

2019-09-21 22:17:45 +08:00 via iPhone

exclude node_modules 了吗

slucus

2019-09-23 11:19:43 +08:00

现在问题已经定位到了。就是因为项目比较大，当时设计的时候为了后续维护方便，拆分了较多的 components，所以导致打包出来了 400 多个 js。。。

然后问题来了，当我们使用 webpack.optimize.LimitChunkCountPlugin 进行 js 合并的时候，就变动巨慢无比，想找个多进程的合并方法，但目前网上好像也没有这块相关的问题

slucus

2019-09-23 11:22:14 +08:00

@noe132 升级也考虑过，但成本太大了，而且会有额外的风险( 因为现在项目已经上线了 )

slucus

2020-06-24 17:48:36 +08:00

这个问题基本上算是解决了。
原因：使用了 import 的方式注册组件 ` () => import() `，使用这种方式，在打包的时候，会把组件打成单独的文件。项目初期这样是没什么问题的，但项目越来越大，组件越来越多。所以就会打出几百个单独的文件，但为了做请求优化，又要把这个几百个文件合并成 10 个左右，所以打包速度成倍增长。

解决方法：使用 require 注册组件。