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
リアルお遍路+SORACOM IoT
ozk009
1
140
効果的なオンコール対応と障害対応
ryuichi1208
6
3.1k
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
150
The XZ Backdoor Story
fr0gger
0
3.6k
Tricentisにおけるテスト自動化へのAI活用ご紹介/20240910Shunsuke Katakura
shift_evolve
0
200
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
160
不動産tech Product Night#2_AIことはじめ_GA橋本
takehikohashimoto
0
190
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
230
Mocking in Rust Applications
taiki45
2
410
Cloud Run と GitHub Template Repository による軽量なアプリケーションプラットフォーム/ #nikkei_tech_talk
nikkei_engineer_recruiting
0
110
Jetpack Compose Modifier 徹底解説 / Jetpack Compose Modifier
wiroha
0
200
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
240
Featured
See All Featured
Infographics Made Easy
chrislema
239
18k
GraphQLとの向き合い方2022年版
quramy
43
13k
The Invisible Side of Design
smashingmag
296
50k
The World Runs on Bad Software
bkeepers
PRO
64
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
In The Pink: A Labor of Love
frogandcode
139
22k
Facilitating Awesome Meetings
lara
49
6k
Documentation Writing (for coders)
carmenintech
65
4.3k
How GitHub (no longer) Works
holman
310
140k
Code Review Best Practice
trishagee
62
16k
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