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
From RequireJS to Webpack
Search
RIDI
November 03, 2017
Technology
3
660
From RequireJS to Webpack
발표자: 스토어팀 조규진
RIDI
November 03, 2017
Tweet
Share
More Decks by RIDI
See All by RIDI
원격 근무 팀 운영 경험 공유
ridi
0
2k
SVG Icon Design Guide
ridi
2
2.9k
빠르게 훑어보는 리디페이 백엔드 개발기
ridi
2
4.7k
Next.js는 정말 zero config였다.
ridi
0
1.8k
3일 걸릴 것 같던 구매목록 다운로드는 왜 3주가 걸렸을까?
ridi
0
310
원격으로 한 달 일해보니
ridi
0
1.3k
리디북스 앱에 S Pen Remote 연동하기
ridi
2
2.4k
UI 라이브러리 개발기
ridi
1
2.2k
테스트 환경 개선하기
ridi
8
3.1k
Other Decks in Technology
See All in Technology
GraphQLに入門してみた
chiroruxx
2
120
BDD(Cucumber)コミュニティが無料提供しているコンテンツの紹介と現在起きている危機
nihonbuson
4
730
マイクロサービス環境におけるDB戦略 in DMMプラットフォーム
pospome
11
3k
技育祭2024春 LT Finatextホールディングス
kevinrobot34
1
160
関数型DDDの理論と実践:「決定を遅らせる」を先につくり、 ビジネスの機動力と価値をあげる
knih
2
470
現実世界の事象から学ぶSOLID原則
h0r15h0
24
10k
Vos logs méritent mieux que la config par défaut
lyrixx
2
290
Autify Company Deck
autifyhq
1
30k
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
3
240
Introduction to Jetpack Compose
pohjus
1
110
沒想過的前端錯誤處理可能比你有做的還多
line_developers_tw
PRO
0
2k
中央集権体制からDataOpsへの転換 / centralized-to-dataops-transformation
pei0804
7
1.4k
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
304
41k
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Become a Pro
speakerdeck
PRO
8
4.4k
It's Worth the Effort
3n
180
27k
The Invisible Side of Design
smashingmag
293
49k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
Scaling GitHub
holman
456
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
GraphQLとの向き合い方2022年版
quramy
28
12k
The Language of Interfaces
destraynor
150
23k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Transcript
From RequireJS To Webpack झషয ઑӏ
• ݽٚ ݽٕ ੌ • ױਤ ࠂ ઁѢо ਬ܂
ঋ • ࢲ ࠽٘ೞ۰ݶ concat ೧ঠೠ (dependency ҅ X) • ࢜۽ بੑೠ Vue.js ਊ ಕח webpackਵ۽ ࠽٘ ⟶ ӝઓ ݽٕҗ ഐജ ө۽
• ݽٕ dependency ӝળਵ۽ ߣٜ • babel ١ নೠ loaderܳ
ా೧ ߣٜ җীࢲ ߸ഋ ਊ оמ webpack
߄Լࠁ~ 7 زউ ࢲ ݽٚ JS ࣻ
• Bower ઁѢ && webpack && ES6 زदী ਊ •
झప పझ݅ 3ߣ… ೧ب ೧ب ࠛউೣ • ߓನ റ উ٘۽٘ীࢲ ۽٘ ز ী۞ • webpack → Bower ઁѢ → ES6 ࣽਵ۽ ਊ೮ݶ?
• ݽٕਸ ղ ۽ • ES6
ߓನ റ
ҳ ߡ উ٘۽٘ জ, ۨ݃ ࠳ۄীࢲ झ݀ ز উ ೣ
• ES3ীࢲ ES ডযܳ foo.keyword, {keyword: ‘foo’} ৬ э ࢎਊೡ
ࣻ হ • ۨ݃ח উ٘۽٘ 4.0.x ੋؘ ES3 babel-polyfill VueJS
Babel plugin ਊ UglifyJSPluginীࢲ द quote ઁѢೞ ঋب۾ ২࣌ ୶о
• moduleIdо ҅ࣘ ߸҃غח ޙઁ • ࠽٘ റ ੌ ױਤ۽
ߓನೞח दझమ (ߣ deployer بੑ ) Ѣ ߓನೞח Ѣ ݏইਃ?
https://webpack.js.org/guides/caching/#module-identifiers
moduleIdী ࢚҃۽৬ hash ਊ webpack ࢸ ࠁ݅ vendors.webpack.js ܻ࠙
ৈ ࢚ ޅೠ ੌ ߸҃ؽ Ѣ ߸҃ػ Ѣ ݏইਃ? •
chunkIdب ҅ࣘ ߸҃
chunkIdب ܴਵ۽ ߸҃
None
• async import • ridibooks.com / static.ridibooks.com • xxx.dev.ridi.io •
config.local.php $STATIC_URL ଵઑ೧ࢲ webpack.local.js ࢤࢿ
• ಣӐ ࠽٘ दр 20s (Babel cache ਊػ ࢚క) •
۽ UglifyJSPluginীࢲ ো
࠙ݺ ҕध ޙࢲী parallel, cache ২࣌ חؘ..
• webpack ҕधޙࢲীࢲ п plugin repo README.md ࢎਊ • ߡ
ҙ҅হ ୭न ழਵ۽ оઉ১
߹ب ۞Ӓੋ ਊ 10ੌ ী UglifyJSPlugin v1.0.0 ܾܻૉ
• webpack ߣٜ݂ ٸޙী ѐߊ दীب sourcemap ਃ • cheap-module-eval-source-map
খਵ۽..
• ԇؘӝ݅ ES6ੋ ݽٕٜ refactor • VueJS ਊ ഛ (GNB,
࢚ࣁಕ दܻૉ ܻझ ١) • jQuery ୭ࣗച…. • ࣘੋ ѐߊജ҃ ѐࢶ
хࢎפ