Next-generation bundle tool 'Turbopack' that is 700 times faster than 'Webpack' appears



On October 25, 2022, ` ` Next.js 13 '', the latest version of the front-end framework `

` Next.js '', was released, and at the same time, `` Turbopack '', the successor to the bundling tool ` ` Webpack '', was also announced. . The developer, Vercel, appeals Turbopack as '700 times faster than Webpack' and publishes benchmark results showing performance.




Turbopack Performance Benchmarks – Turbo
https://turbo.build/blog/turbopack-benchmarks

Turbopack is a bundling tool developed mainly by the development team of Webpack, a JavaScript-based bundling tool. Vercel has appealed that 'Turbopack is 700 times faster than Webpack', and has released benchmark results of Turbopack, Webpack, and the front-end build tool ' Vite ' to show its performance.

◆1: Cold start
In order to measure the processing speed of each framework, Vercel drew the following `` Sierpinski 's gasket '' in each framework and measured the time to draw a triangle.



The figure below shows how long it took to draw 1000 triangles from no cache. Next.js 13 using Turbopack as a bundling tool is the fastest at 1.1 seconds, followed by Next.js 12 (3.4 seconds) using Webpack as a bundling tool, Vite (4.8 seconds), Next.js 11 (7.7 seconds). I'm here.



In addition, the graph below shows the number of triangles drawn on the horizontal axis and the time taken for drawing on the vertical axis, blue is Next.js 11, green is Vite, light blue is Next.js 12, red is Turbopack shows the drawing time of Next.js 13 using Turbopack has the fastest drawing time regardless of the number of triangles, finishing drawing 25,000 triangles within 20 seconds.



◆2: File update
The table below shows the results of measuring the 'time from file update to response to update (HMR)' for each framework. For 1000 components, Next.js 13 using Turbopack as a bundling tool is the shortest at 15ms, followed by Vite (87ms), Next.js 12 (134ms), Next.js 11 (273ms). milliseconds).



In the graph below, the horizontal axis shows the number of modules, and the vertical axis shows the time until response. Blue is Next.js 11, light blue is Next.js 12, red is Turbopack, and green is Vite. is showing. Next.js 11, Next.js 12, and Vite have longer response times as the number of modules increases, while Next.js 13 using Turbopack changes the response time significantly even if the number of modules increases. I have not.



Below are the results of Vite and Turbopack extracted from the above graph. Next.js 13 using Turbopack maintains almost constant response speed against Vite, although response time is getting longer as the number of modules increases in Vite.

Related Posts:

in Software, Posted by log1r_ut