Just shallow compare the Webpack and Rollup for main features like tree shaking, code splitting and more.

1. Rollup v.s Webpack
Shallow compare the next generation ES6 bundlers
Jay Chung

2. Jay Chung
https://github.com/xJkit
https://twitter.com/xJkit
https://medium.com/@xjkit
https://linkedin.com/in/xjkit54780/
Frond End Developer @ QNAP

3. Contents
• 介紹打包歷史與解決的問題
<script> > Bower > Grunt > Webpack || Rollup
• Webpack v.s Rollup

4. 打包⼯工具起源
函式庫難以管理理
舊瀏覽器 blocking

6. Bower: Please use Webpack…

10. 換湯不換藥 全域污染
管理理模組變簡單了了

11. 換湯不換藥 全域污染
管理理模組變簡單了了 However.. we love

15. • Compressing image files
• Eliminating debugger and console statements from scripts
• Minifying, concatenating, and cleaning up CSS and JavaScript
• Linting code for errors
• Compiling LESS files
• Running unit tests
• Sending updates to a production server
• Updating databases

16. CodingConfiguration

17. Webpack
Cover most features of Grunt & Gulp

18. Rollup

19. https://github.com/facebook/react/pull/9327
Facebook React finally use Rollup

20. Rollup v.s Webpack

21. Webpack
webpack.config.js
• entry: js 入⼝口
• output:
• path
• filename

22. Rollup
rollup.config.js
• input: js 入⼝口
• output:
• file: 路路徑+檔名
• format: es||cjs||iife||amd||umd
• name: 給 iife 函數名稱

23. Demo
• Basic usage compare (with Rollup tree shaking)
• Uglify compare (with Webpack tree shaking)
• Add image assets example
• Code splitting & dynamic import (Webpack only)
https://github.com/xJkit/webpack-vs-rollup-example.git

24. Tree Shaking
utils.js
entry.js
import *
Bundle
rollup.bundle.js

25. Tree Shaking
webpack.bundle.js
……………….……
(落落落落長)

26. Tree Shaking
webpack.bundle.js
warning
You need
UglifyJsPlugin
to turn on tree shaking

27. !function(e){function t(o){if(n[o])return
n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return
e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var
n={};t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||
Object.defineProperty(e,n,{configurable:!1,enumerable:!
0,get:o})},t.n=function(e){var n=e&&e.__esModule?
function(){return e.default}:function(){return e};return
t.d(n,"a",n),n},t.o=function(e,t){return
Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=
0)}([function(e,t,n){"use
strict";Object.defineProperty(t,"__esModule",{value:!
0}),n(1).a()},function(e,t,n){"use strict";function o()
{console.log("you just bought an iPhone!")}t.a=o}]);
Tree Shaking
webpack.bundle.min.js
UglifyJsPlugin

28. Code Splitting
Dynamic Import: return Promise

29. Code Splitting
Independent
codes & images
will be loaded
after click event

30. Compatibility
rollup.config.js
Bundle
AMD
CommonJS
ES Modules
IIFE

31. Compatibility
AMD
CommonJS
ES Modules
IIFE

32. Bundle Size Comparison

33. Rollup Webpack
Bundle size 程式碼可讀(相對較⼩小) 程式碼難讀(相對較⼤大)
Module
Resolve
較繁瑣
（需要另外安裝 plugins）
⼤大部分不需設定
(內建許多 plugins)
Contributors 98 349
Sponsors ? A lot…
場景 透過 ES6 建構 JavaScript libraries 建構 Web Application
Code
Splitting
NO YES
HMR NO YES
Features
Tree shaking
原⽣生⽀支援 ES6 modules
⽀支援打包 AMD, ES6, CommJS modules
Tree shaking(> 2.x)
Code Splitting
Static Assets
Example
Mainly JavaScript Libraries
(React, Vue, Ember, Preact, D3, Three.js, Moment.js)
Mainly Web Applications

34. Thanks for your listening