灞傚眰浼樺寲webpack鎵撳寘浣撶Н

Posted 鍓嶇琛ョ粰绔?/a> 灞傚

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了灞傚眰浼樺寲webpack鎵撳寘浣撶Н相关的知识,希望对你有一定的参考价值。

锛堢偣鍑火煈?/span>鍓嶇琛ョ粰绔?/span>锛屽彲蹇€熷叧娉級



鍐欏湪鍓嶉潰锛氭鏂囧彧閽堝鐢熶骇鐜銆?/span>


1.鍓嶈█


react鎶€鏈爤涓嬬殑寮€鍙戜竴鑸兘鏄€滈噸澶存垙鈥濓紝react锛宺eact-dom锛宺eact-router,redux.....灏辫繖鍑犱釜鏂囦欢锛屽鏋滀綘鐩存帴鎵撳寘宸茬粡杩滆繙瓒呰繃浜?M浜嗐€備絾鏄垜浠湪瀹為檯寮€鍙戜腑鍙娇鐢ㄨ繖浜涜偗瀹氭槸杩滆繙涓嶅鐨勶紝姣斿浣跨敤涓€涓猆I搴擄紝濡俛ntd(4M澶?锛岀涓夋柟浼樼缁勪欢锛堟垜浠鏈夐€犺疆瀛愮殑鑳藉姏锛屼篃瑕佹湁涓嶉€犺疆瀛愮殑瑙夋偀锛夌瓑绛夈€傚氨杩欐牱鍐嶅姞涓婂嚑鐧句釜jsx,鍑犲崄鍏嗗氨涓嬫潵浜嗐€傚ソ锛屼綘璇磜eb缃戦〉閮戒笉鍦ㄤ箮杩欎簺锛岄偅涔堝鏋滄湁涓€澶╅渶姹備竴涓獁ebApp鍛紵浼樺寲webpack鎵撳寘浣撶Н鐨勯渶瑕佽繖灏辨潵浜嗗憲銆?/span>


2.鍖哄垎寮€鍙戠幆澧?/strong>


鍘绘帀浣犵殑鐑姞杞斤紝devtool(flase), logger(濡俽edux-logger)绛夛紝寮€鍙戠幆澧冪敤鐨勮皟璇曞伐鍏锋棤闇€鍑虹幇鍦ㄦ偍鐨勭敓浜х幆澧冧腑锛屽彲鐢ㄦ鐜鍙橀噺鍖哄垎锛?/span>



package.json涓殑鑴氭湰鍛戒护鍚姩鍔犱笂锛?/span>


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


3.鎻愬彇绗笁鏂逛唬鐮?/strong>


锛?锛塁ommonsChunkPlugin


閫氳繃灏嗗叕鍏辨ā鍧楁媶鍑烘潵锛屾渶缁堝悎鎴愮殑鏂囦欢鑳藉鍦ㄦ渶寮€濮嬬殑鏃跺€欏姞杞戒竴娆★紝渚垮瓨璧锋潵鍒扮紦瀛樹腑渚涘悗缁娇鐢ㄣ€傝繖涓甫鏉ラ€熷害涓婄殑鎻愬崌锛屽洜涓烘祻瑙堝櫒浼氳繀閫熷皢鍏叡鐨勪唬鐮佷粠缂撳瓨涓彇鍑烘潵锛岃€屼笉鏄瘡娆¤闂竴涓柊椤甸潰鏃讹紝鍐嶅幓鍔犺浇涓€涓洿澶х殑鏂囦欢銆?/span>

  • CommonsChunkPlugin锛?/span>

    https://doc.webpack-china.org/plugins/commons-chunk-plugin/


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


锛?锛塃xternals


 浣犲彲浠ュ憡璇墂ebpack鏃犻渶鎵撳寘鍝簺搴撴枃浠讹紝鐒跺悗浠庡閮ㄧ敤 CDN 寮曞叆銆?/span>

  • 澶栭儴鎵╁睍(Externals)锛?/span>

    https://doc.webpack-china.org/configuration/externals/


浠query涓烘牀瀛?/span>


index.html


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


webpack.config.pro.js


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


杩欐牱灏卞墺绂讳簡閭d簺涓嶉渶瑕佹敼鍔ㄧ殑渚濊禆妯″潡锛屾崲鍙ヨ瘽锛屼笅闈㈠睍绀虹殑浠g爜杩樺彲浠ユ甯歌繍琛岋細


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


(3).DefinePlugin && DllPlugin


澶у瀵箇indows 绯荤粺搴旇涓嶉檶鐢燂紝绯荤粺鎴栧簲鐢ㄩ厤缃枃浠朵腑鎴戜滑甯稿父鍙互鐪嬪埌 .dll 缁撳熬鐨勬枃浠躲€俤ll 鍏ㄧО鏄細dynamic link library锛堝姩鎬侀摼鎺ュ簱锛夈€傚井杞畼鏂逛粙缁?dll 鐨勪竴涓娇鐢ㄥ満鏅細windows 绯荤粺鎻愪緵涓€涓?dialog box 搴擄紝浠讳綍搴旂敤閮藉彲浠ョ洿鎺ュ紩鐢ㄣ€?/span>

  • DefinePlugin锛?/span>

    https://doc.webpack-china.org/plugins/define-plugin/

  • DllPlugin锛?/span>

    https://doc.webpack-china.org/plugins/dll-plugin/


棣栧厛鎴戜滑寰楀垱寤轰竴涓悕涓?webpack.dll.js 鐨勯厤缃枃浠讹紙鐒跺悗鎵ц鎵撳寘锛?/span>


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


webpack.config.pro.js(璁╀笟鍔′唬鐮佷腑鐨?require import 鐭ラ亾濡備綍鍘诲鎵?dll 鏂囦欢涓殑渚濊禆)


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


鎬荤粨锛氫釜浜烘瘮杈冨枩娆㈢涓€锛岀涓夌鏂瑰紡銆?/span>


4.ExtractTextPlugin 鍒嗙css


绉诲姩鍒扮嫭绔嬪垎绂荤殑 CSS 鏂囦欢涔嬪悗锛屼綘鐨勬牱寮忓皢涓嶅啀鍐呭祵鍒?JS bundle 涓紝鑰屾槸浼氭斁鍒颁竴涓崟鐙殑 CSS 鏂囦欢锛堝嵆 styles.css锛夊綋涓€?濡傛灉浣犵殑鏍峰紡鏂囦欢澶у皬杈冨ぇ锛岃繖浼氬仛鏇村揩鎻愬墠鍔犺浇锛屽洜涓?CSS bundle 浼氳窡 JS bundle 骞惰鍔犺浇銆?/span>

  • ExtractTextWebpackPlugin锛?/span>

    https://doc.webpack-china.org/plugins/extract-text-webpack-plugin/


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


5.Resolve


resolver甯姪webpack 鎵惧埌 bundle 涓渶瑕佸紩鍏ョ殑妯″潡浠g爜锛岃繖浜涗唬鐮佸湪鍖呭惈鍦ㄤ釜 require/import 璇彞涓€?褰撴墦鍖呮ā鍧楁椂锛寃ebpack浣跨敤 enhanced-resolve 鏉ヨВ鏋愭枃浠惰矾寰勩€?/span>

  • enhanced-resolve锛?/span>

    https://github.com/webpack/enhanced-resolve

  • 瑙f瀽(Resolve)锛?/span>

    https://doc.webpack-china.org/configuration/resolve/


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


6.鍛婅瘔react鎴戞槸鐢熶骇鐜鍟?/strong>


杩欓噷鍙堢敤鍒颁簡DefinePlugin

  • DefinePlugin

    https://doc.webpack-china.org/plugins/define-plugin/


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


7.htmlWebpackPlugin


绠€鍖栦簡HTML鏂囦欢鐨勫垱寤猴紝浠ヤ究涓烘偍鐨剋ebpack鍖呮彁渚涙湇鍔°€?br>

  • HtmlWebpackPlugin锛?/span>

    https://doc.webpack-china.org/plugins/html-webpack-plugin/


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


8.UglifyJsPlugin


鐔熸倝瀹夊崜缂栫爜鐨勫悓瀛﹂兘鐭ラ亾鍘嬬缉娣锋穯锛孶glifyJsPlugin 椤惧悕鎬濅箟灏辨槸涓戦檵鐨勬剰鎬濓紝鎴戜滑閮藉彨瀹?鈥樹笐鍖栤€欍€?/span>

  • UglifyJsPlugin锛?/span>

    https://doc.webpack-china.org/plugins/uglifyjs-webpack-plugin/


涓戝寲鍚庣殑浠g爜闀夸粈涔堟牱瀛愬憿锛熼偅鍙槸鐪熶笐锛?/span>


灞傚眰浼樺寲webpack鎵撳寘浣撶Н

涓戞浜?png


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


9.gzip


 杩欎釜澶у閮戒笉浼氶檶鐢熷惂銆?/span>


(1)compression-webpack-plugin


璇ユ彃浠惰兘澶熷皢璧勬簮鏂囦欢鍘嬬缉涓?gz鏂囦欢锛屽苟涓旀牴鎹鎴风鐨勯渶姹傛寜闇€鍔犺浇銆?br>

  • compression-webpack-plugin锛?/span>

    https://github.com/webpack-contrib/compression-webpack-plugin


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


(2)nginx鏈嶅姟鍣?      涔媑zip


(3)apache鏈嶅姟鍣?  涔媑zip


(4)node(express)鏈嶅姟鍣? 涔媑zip


(5)node(koa)鏈嶅姟鍣?       涔媑zip


10.锛坅ntd锛塨abel-plugin-import


濡傛灉浣犵殑椤圭洰涓敤鍒颁簡UI缁勪欢搴擄紝鍙姞杞界敤鍒扮殑缁勪欢

  • babel-plugin-import锛?/span>

    https://ant.design/docs/react/introduce-cn


(1)鍦?babelrc涓?/span>


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


(2)babel-loader


灞傚眰浼樺寲webpack鎵撳寘浣撶Н


11.tree shaking


 娑堥櫎unused code

  • tree shaking锛?/span>

    https://doc.webpack-china.org/guides/tree-shaking/


缁忚繃浠ヤ笂灞傚眰浼樺寲锛屾渶鏃╃敱8M浼樺寲鍒?00澶欿B銆?/span>



浼樺寲.png


锛忔洿澶氶槄璇伙紡 


  •  hot馃敟

  •  hot馃敟

  •  hot馃敟


瑙夊緱鏈枃寰堟湁甯姪锛熻浼犻€掔粰鏇村鏈嬪弸

鍏虫敞 銆?span>鍓嶇琛ョ粰绔欍€?/strong>锛屾彁鍗囧墠绔妧鑳?/span>


以上是关于灞傚眰浼樺寲webpack鎵撳寘浣撶Н的主要内容,如果未能解决你的问题,请参考以下文章

浣犲彲鑳戒笉鐭ラ亾鐨?鏉ebpack浼樺寲绛栫暐

webpack姒傝堪鈥斺€旇祫婧愩€佹牱寮忋€佸浘鐗囩殑鎵撳寘宸ュ叿

鍒嗕韩 9 鏉?Webpack 浼樺寲绛栫暐

浜屽垎鏌ユ壘娉曞疄鐜版渶浼樺浘鐗囧帇缂╀綋绉苟涓婁紶

Springboot 鎵撳寘閮ㄧ讲

SEO浼樺寲锛氭祬鏋愰潤鎬佸寲椤甸潰瀵逛簬缃戠珯浼樺寲鐨勫奖鍝嶆槸浠€涔堬紵