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
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
1
120
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
4.6k
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
170
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
APIテスト自動化の勘所
yokawasa
7
4.2k
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン 〜2024年版 ハンズオンの構想〜
horsewin
9
2.1k
一休.comレストランにおけるRustの活用
kymmt90
3
580
CyberAgent 生成AI Deep Dive with Amazon Web Services / genai-aws
cyberagentdevelopers
PRO
1
480
いまさらのStorybook
ikumatadokoro
0
140
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
220
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
630
Datachain会社紹介資料(2024年11月) / Company Deck
datachain
3
16k
Featured
See All Featured
KATA
mclloyd
29
13k
Documentation Writing (for coders)
carmenintech
65
4.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Adopting Sorbet at Scale
ufuk
73
9k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
For a Future-Friendly Web
brad_frost
175
9.4k
Embracing the Ebb and Flow
colly
84
4.4k
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