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
OCI Network Firewall 概要
oracle4engineer
PRO
0
4.2k
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
370
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
170
Engineer Career Talk
lycorp_recruit_jp
0
190
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
110
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
110
飲食店データの分析事例とそれを支えるデータ基盤
kimujun
0
180
OCI Vault 概要
oracle4engineer
PRO
0
9.7k
Incident Response Practices: Waroom's Features and Future Challenges
rrreeeyyy
0
160
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
450
複雑なState管理からの脱却
sansantech
PRO
1
150
Featured
See All Featured
Being A Developer After 40
akosma
87
590k
Happy Clients
brianwarren
98
6.7k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
What's new in Ruby 2.0
geeforr
343
31k
The Language of Interfaces
destraynor
154
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Writing Fast Ruby
sferik
627
61k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Teambox: Starting and Learning
jrom
133
8.8k
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