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
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.1k
データ分析エージェント Socrates の育て方
na0
5
1.3k
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
Oracle Cloud Infrastructure IaaS 新機能アップデート 2025/06 - 2025/08
oracle4engineer
PRO
0
100
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
110
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
人工衛星のファームウェアをRustで書く理由
koba789
15
8.2k
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
3
230
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
260
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Gamification - CAS2011
davidbonilla
81
5.4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Embracing the Ebb and Flow
colly
87
4.8k
Code Reviewing Like a Champion
maltzj
525
40k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
GitHub's CSS Performance
jonrohan
1032
460k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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