Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
es module bundling with webpack 2
Search
cjies
March 29, 2017
Technology
1
550
es module bundling with webpack 2
F2E&RGBA Meetup 三月號
cjies
March 29, 2017
Tweet
Share
More Decks by cjies
See All by cjies
git, let it flow!
cjies
9
2.2k
git flow
cjies
0
310
Other Decks in Technology
See All in Technology
「認証認可」という体験をデザインする ~Nekko Cloud認証認可基盤計画
logica0419
2
450
株式会社EventHub・エンジニア採用資料
eventhub
0
3k
Next.js のページ遷移を全力で止める
ypresto
8
3.4k
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
240
プログラム検証入門
riru
6
880
Road to Single Activity
yurihondo
2
240
watsonx.ai Dojo 環境準備について
oniak3ibm
PRO
0
340
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
250
再考 アクターモデル/ reconsider actor model
ytake
0
370
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
200
「自動テストのプラクティスを効果的に学ぶためのカードゲーム」 ( #sqip2024 )
teyamagu
PRO
2
180
Swift Testingのconfirmationを コードリーディング/Dive into Swift Testing confirmation
laprasdrum
2
260
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
Become a Pro
speakerdeck
PRO
22
4.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Being A Developer After 40
akosma
84
590k
Practical Orchestrator
shlominoach
185
10k
A Philosophy of Restraint
colly
202
16k
Navigating Team Friction
lara
183
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
The Invisible Customer
myddelton
119
13k
Typedesign – Prime Four
hannesfritz
39
2.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Transcript
es module bundling with webpack 2 CJ 2017/03/29 F2E&RGBA Meetup
三⽉月號
CJies Tan front end n00b @ iCHEF cjies.com
webpack.js.org
webpack v2 stable released @ Jan 18
migrating to v2 https://webpack.js.org/guides/migrating/
webpack v2 features es6 support tree-shaking dynamic code-splitting build performance
improvement https://medium.com/webpack/webpack-2-and-beyond
es6 support no longer transpile import and export statements with
babel ["es2015", { "modules": false }]
tree-shaking • popularized by Rich Harris’ module bundler Rollup •
“mark” and drop unused exports • won’t work with CommonJS require https://blog.engineyard.com/2016/tree-shaking https://medium.com/@roman01la/dead-code-elimination-and-tree-shaking-in-javascript-build-systems
es ready libraries webpack 2 or rollup will resolve module
first if es6 supported { // commonJS entry "main": "lib/index.js", // es module entry "module": "es/index.js" } https://gist.github.com/cjies/31b602b53adf22320936663756abd61f https://github.com/rollup/rollup/wiki/pkg.module
tree-shaking demo https://github.com/cjies/tree-shaking-demo
issues to follow up webpack/webpack#2867 mishoo/UglifyJS2#1261
dynamic code-splitting
dynamic import() • webpack treats import() as a split-point. •
puts the request module in a separate chunk. • return a Promise.
https://webpack.js.org/guides/code-splitting-import/
react-async-component https://github.com/ctrlplusb/react-async-component
None
limitation of import() path // Wrong, no fully dynamic import(Math.random())
// ( Correct, support partially static import('./components/Product') import('./locale' + language + '.json')
$ exit thanks for your listening