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
560
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.3k
git flow
cjies
0
330
Other Decks in Technology
See All in Technology
大規模イベントに向けた ABEMA アーキテクチャの遍歴 ~ Platform Strategy 詳細解説 ~
nagapad
0
110
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
280
地域コミュニティへの「感謝」と「恩返し」 / 20250726jawsug-tochigi
kasacchiful
0
110
Mambaで物体検出 完全に理解した
shirarei24
2
160
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
130
MCPと認可まわりの話 / mcp_and_authorization
convto
2
350
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
130
大規模イベントを支える ABEMA の アーキテクチャ 変遷 2025
nagapad
6
590
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
os1ma
9
1.2k
[TechNight #91] Oracle Database 最新パフォーマンス分析手法
oracle4engineer
PRO
4
300
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
3
360
alecthomas/kong はいいぞ
fujiwara3
6
1.3k
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Code Review Best Practice
trishagee
69
19k
Optimizing for Happiness
mojombo
379
70k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Music & Morning Musume
bryan
46
6.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Unsuck your backbone
ammeep
671
58k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
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