灞傚眰浼樺寲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>
3.鎻愬彇绗笁鏂逛唬鐮?/strong>
锛?锛塁ommonsChunkPlugin
閫氳繃灏嗗叕鍏辨ā鍧楁媶鍑烘潵锛屾渶缁堝悎鎴愮殑鏂囦欢鑳藉鍦ㄦ渶寮€濮嬬殑鏃跺€欏姞杞戒竴娆★紝渚垮瓨璧锋潵鍒扮紦瀛樹腑渚涘悗缁娇鐢ㄣ€傝繖涓甫鏉ラ€熷害涓婄殑鎻愬崌锛屽洜涓烘祻瑙堝櫒浼氳繀閫熷皢鍏叡鐨勪唬鐮佷粠缂撳瓨涓彇鍑烘潵锛岃€屼笉鏄瘡娆¤闂竴涓柊椤甸潰鏃讹紝鍐嶅幓鍔犺浇涓€涓洿澶х殑鏂囦欢銆?/span>
CommonsChunkPlugin锛?/span>
https://doc.webpack-china.org/plugins/commons-chunk-plugin/
锛?锛塃xternals
浣犲彲浠ュ憡璇墂ebpack鏃犻渶鎵撳寘鍝簺搴撴枃浠讹紝鐒跺悗浠庡閮ㄧ敤 CDN 寮曞叆銆?/span>
澶栭儴鎵╁睍(Externals)锛?/span>
https://doc.webpack-china.org/configuration/externals/
浠query涓烘牀瀛?/span>
index.html
webpack.config.pro.js
杩欐牱灏卞墺绂讳簡閭ｄ簺涓嶉渶瑕佹敼鍔ㄧ殑渚濊禆妯″潡锛屾崲鍙ヨ瘽锛屼笅闈㈠睍绀虹殑浠ｇ爜杩樺彲浠ユ甯歌繍琛岋細
(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.config.pro.js(璁╀笟鍔′唬鐮佷腑鐨?require import 鐭ラ亾濡備綍鍘诲鎵?dll 鏂囦欢涓殑渚濊禆)
鎬荤粨锛氫釜浜烘瘮杈冨枩娆㈢涓€锛岀涓夌鏂瑰紡銆?/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/
5.Resolve
resolver甯姪webpack 鎵惧埌 bundle 涓渶瑕佸紩鍏ョ殑妯″潡浠ｇ爜锛岃繖浜涗唬鐮佸湪鍖呭惈鍦ㄤ釜 require/import 璇彞涓€?褰撴墦鍖呮ā鍧楁椂锛寃ebpack浣跨敤 enhanced-resolve 鏉ヨВ鏋愭枃浠惰矾寰勩€?/span>
enhanced-resolve锛?/span>
https://github.com/webpack/enhanced-resolve
瑙ｆ瀽(Resolve)锛?/span>
https://doc.webpack-china.org/configuration/resolve/
6.鍛婅瘔react鎴戞槸鐢熶骇鐜鍟?/strong>
杩欓噷鍙堢敤鍒颁簡DefinePlugin
DefinePlugin
https://doc.webpack-china.org/plugins/define-plugin/
7.htmlWebpackPlugin
绠€鍖栦簡HTML鏂囦欢鐨勫垱寤猴紝浠ヤ究涓烘偍鐨剋ebpack鍖呮彁渚涙湇鍔°€?br>
HtmlWebpackPlugin锛?/span>
https://doc.webpack-china.org/plugins/html-webpack-plugin/
8.UglifyJsPlugin
鐔熸倝瀹夊崜缂栫爜鐨勫悓瀛﹂兘鐭ラ亾鍘嬬缉娣锋穯锛孶glifyJsPlugin 椤惧悕鎬濅箟灏辨槸涓戦檵鐨勬剰鎬濓紝鎴戜滑閮藉彨瀹?鈥樹笐鍖栤€欍€?/span>
UglifyJsPlugin锛?/span>
https://doc.webpack-china.org/plugins/uglifyjs-webpack-plugin/
涓戝寲鍚庣殑浠ｇ爜闀夸粈涔堟牱瀛愬憿锛熼偅鍙槸鐪熶笐锛?/span>
涓戞浜?png
9.gzip
杩欎釜澶у閮戒笉浼氶檶鐢熷惂銆?/span>
(1)compression-webpack-plugin
璇ユ彃浠惰兘澶熷皢璧勬簮鏂囦欢鍘嬬缉涓?gz鏂囦欢锛屽苟涓旀牴鎹鎴风鐨勯渶姹傛寜闇€鍔犺浇銆?br>
compression-webpack-plugin锛?/span>
https://github.com/webpack-contrib/compression-webpack-plugin
(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>
(2)babel-loader
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鎵撳寘浣撶Н的主要内容，如果未能解决你的问题，请参考以下文章