搜狗前端工程化探索之路段振兴

《搜狗前端工程化探索之路段振兴》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、൤ᇸڹᒒૡᑕ۸റᔱԏ᪠ྦྷഄي2016.11.24

ABOUTMEፐय़ᗑᕶᚸᦔ(QQᑮᳵ)ጯଶԯᚸᦔ/൤ᇸ2010201120122013

AGENDAᎪ࢏෸դ+ૡᑕ۸෸դ

01Ꭺ࢏෸դ

ዳᅩᶉாᩒრ෈կच๜෫ڹᒒ෫ဩ๜ࣈ᧣ᦶ॔አ̵ᖌಷ௔᫾૧ᗌԓᕟᕢᛔۖ۸ૡٍ

02ૡᑕ۸෸դ

ᒫӞེૡӱᶐ޸๜ࣈےقਞbew૲ݎᲫӞ+ୌ຅۸ۖᛔݎ୏۸ࣘཛྷ+᝜ᥢ୯ፓᦶ᧣ݢࢴ

๜ࣈݢ᧣ᦶSpringMVCVelocityཛྷ຃

Velocityཛྷ຃ፓ୯ᥢ᝜viewdeploylayoutsrccommonchan

2、nel1page1content.vm

ᶉாᩒრፓ୯ᥢ᝜staticjscomponentsdeploylibsrcproject1channel1page1main.jscsscommonproject1channel1page1style.css

JSཛྷࣘ۸Sea.jsdefine(function(require,exports,module){//code});

CSSཛྷࣘ۸@importSASS

ᛔۖ۸຅ୌૡٍwenkeᯈᗝᔺቜv1.0Sea.jsGruntᖫᦲපሲӧṛ

ᛔۖ۸຅ୌૡٍwenkeސ

3、ݐ൉຃ཛྷyticoleVຉړൈಚۖᵱwenkeᥝ຅ୌጱᶉாᩒრڜᤒ॒ቘᶉாᩒრ෈կଚᖫᦲཛྷ຃ኞ౮ᶉா੒ྲᶉாᩒრฉ੘ᤒीᰁӤփᩒრฉ੘ᤒCDN໊ḵ෈կ೰ᕖ

మషளጱݎ૲ހҘӞᲫݎ૲

ݎ૲ᔮᕹ

ள᭛ਧᕚӤᳯ᷌ႲےURLሾहಢᰁդቘᶉாץ॔݇හFiddlerᩒრᛗ๜ࣈᕚӤᳯ᷌୏ݎ਍ӤᕚCharlesሿ࣋

ܧᴾਁᒧ<̵>̵&̵’̵”ᬦᄁCSRFᴠகਞقፘىCookieHttpOnly۸WebਞقےࢴCGIളݗਞقಚൈContentSecurityPolicyXSSڹᒒԆۖᴠக

ᶉாդᎱᨶᰁ༄ັૡٍJSLint

4、
᧣ᦶૡٍChromeInspectweinre&vConsoleFiddler&Charles

இս۸ݝమٟCommonJSཛྷࣘӧమٟdeƉneڍහమٟES6አclassๅঅࣈᕟᕢդᎱ൉܋຅ୌ௔ᚆํဌํྲGruntๅঅጱ຅ୌૡٍҘ？

܋ᕆwenke୚ڦlebaBف஫ԧv2.0BrowserifyGulpඪ೮ES6ّ਻IE8

᯿຅຅ୌ෸ᳵશ؀຅ୌૡٍդᎱᰁ350ᑁ3500ᤈ280ᑁ2800ᤈ210ᑁ2100ᤈ140ᑁ1400ᤈ70ᑁ700ᤈ0ᑁ0ᤈս۸ڹս۸ս۸ڹս۸

wenke-devਫ෸୏ݎᬀۗૡٍ୚ف

5、Babel᫨ഘES6ਫ෸ᖫᦲBrowserifyཛྷࣘGulp.watch+socket.io=LiveReload

wenke-devૡၞސݐ൉຃ཛྷyticoleVຉړൈಚۖᵱᥝ॒ቘᶉாᩒრ෈կwenke-devᖫᦲጱᶉாᩒრڜᤒsocket.ioፊ᭗ᬦWebSocketᬳള᭗Ꭳၨᥦ࢏ץկ෈ഴፊෛڬදၨᥦ࢏ލץදמݩݎኞץද෸᥶ݎ᯿ෛᖫᦲ

܋ᕆ౮๜Ӟޮਠ౮wenke-dev୏ݎ3ॠਠ౮ق᮱դᎱጱද᭜

ڹᒒፊഴଘݣ

இս۸ᬼڔᵱᥝๅᇝڥጱೲᵱے᫹ڹᒒཛྷ຃୏ݎ᧣ᦶපሲᚂ࿜դᎱग़？ᵱᥝๅ୩य़ጱ຅ୌ޾ಘ઀

ᒫԫེ

6、ૡӱᶐ޸webpack+GulpReact+Vue.js+ES7/8

୩य़ጱLoaderኞாCodeSplittingwebpackࢶᇆۖாࣈ࣎ᅾے᫹

CodeSplitting

CodeSplitting

ࢶᇆۖாࣈ࣎

୏ݎ໛ຝᭌೠreact-routerReactvue-router+ّԧ஫ڦ਻IE8react-reduxVue.jsvuex

React᧣ᦶൊկ

Vue.js᧣ᦶൊկ

ᅾے᫹

ᕟկ۸୏ݎ

ᶉாդᎱᨶᰁ༄ັૡٍESLinteslint-plugin-reac

7、teslint-plugin-vue

Ӟᅩտᥤࢶහഝᕬਧᚂ࿜դᎱٺ੝JSX+DSL=ཛྷ຃୏ݎ᧣ᦶṛපԪկᕬਧๅႴศᕟկ۸୏ݎ

܋ᕆwenke-devwebpack+GulpReact+Vue.jsES6/7/8react-hot-loaderGulp.watch+socket.io=LiveReload

܋ᕆwenkewebpackReactv3.0++ES6/7/8GulpVue.js

᯿຅຅ୌ෸ᳵશ؀຅ୌૡٍդᎱᰁ150ᑁ2000ᤈ120ᑁ1600ᤈ90ᑁ1200ᤈ60ᑁ800ᤈ30ᑁ400ᤈ0ᑁ0ᤈս۸ڹ

8、ս۸ս۸ڹս۸

௛ᕮReact̵Vue.js̵ES6/7/8̵ཛྷࣘ۸̵ᕟկ۸̵चᏐପਫ෸୏ݎᬀۗૡٍғwenke-devӞᲫݎ૲ᔮᕹҁᵞ౮wenke҂ڹᒒፊഴҁ௔ᚆ̵୑ଉᒵ҂

Ӟᅩᕪḵɠੱݢᚆୌᦡྲ᫾ਠ࠺ጱڹ