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
Nstockの一人目エンジニアが 3年間かけて向き合ってきた セキュリティのこととこれから〜あれから半年〜
yo41sawada
0
200
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
2
340
Kiroと学ぶコンテキストエンジニアリング
oikon48
6
8.8k
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
270
Automating Web Accessibility Testing with AI Agents
maminami373
0
1k
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
120
Language Update: Java
skrb
2
260
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.2k
DDD集約とサービスコンテキスト境界との関係性
pandayumi
2
260
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
200
シークレット管理だけじゃない!HashiCorp Vault でデータ暗号化をしよう / Beyond Secret Management! Let's Encrypt Data with HashiCorp Vault
nnstt1
3
220
落ちる 落ちるよ サーバーは落ちる
suehiromasatoshi
0
140
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
KATA
mclloyd
32
14k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
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