代碼分離是什么

代碼分離是一種技術(shù)，使得主文件被拆分為多個(gè)文件，同時(shí)保證分離后的代碼對(duì)原有的功能沒(méi)有影響。webpack也具備代碼分離的能力。由于webpack的打包過(guò)程是自動(dòng)化的，因此自然的通過(guò)webpack做代碼分離后的文件之間的關(guān)系要么是自動(dòng)關(guān)聯(lián)的要么能很清晰看到分離文件之間的聯(lián)系。
webpack中代碼分離的方案分為三類(lèi)：

成都創(chuàng)新互聯(lián)公司專(zhuān)注于巨野網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供巨野營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，巨野網(wǎng)站制作、巨野網(wǎng)頁(yè)設(shè)計(jì)、巨野網(wǎng)站官網(wǎng)定制、小程序設(shè)計(jì)服務(wù)，打造巨野網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供巨野網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

1. 多入口
   webpack從一個(gè)入口出發(fā)對(duì)應(yīng)一個(gè)輸出的bundle.js，那么多個(gè)入口就將會(huì)有多個(gè)輸出的bundle.js，雖然這些bundle.js之間不存在自動(dòng)的關(guān)聯(lián)關(guān)系，但是，在HTML文件中分別引入他們就能實(shí)現(xiàn)了引用關(guān)聯(lián)。甚至可以使用HtmlWebpackPlugin插件，自動(dòng)化生成引用由webpack打包生成的JavaScript文件的HTML文件。

2. CommonsChunkPlugin
   該插件可以用來(lái)分離引用的第三方庫(kù)，將第三方庫(kù)獨(dú)立成為一個(gè)JavaScript文件，之后的操作如同多入口產(chǎn)生的多個(gè)bundle.js一樣，或者在HTML文件中引用，或者由HtmlWebpackPlugin插件來(lái)生成這個(gè)包含引用的HTML文件。
   
   上圖的代碼截圖于https://github.com/webpack/webpack/releases 的v3.10.0版本中的/examples/multiple-entry-points/webpack.config.js。結(jié)合了多入口和CommonsChunkPlugin的使用，可以作為示例參考。
3. 動(dòng)態(tài)導(dǎo)入
   上面兩種方案有很大的局限性，首先要求代碼可以分為多個(gè)入口否則多入口的方案沒(méi)有意義，其次，使用CommonsChunkPlugin可以提取第三方庫(kù)，但是卻沒(méi)有說(shuō)明業(yè)務(wù)代碼怎么做代碼分離，因此，第三種方案動(dòng)態(tài)導(dǎo)入要來(lái)解決業(yè)務(wù)代碼中的代碼分離問(wèn)題。
   webpack支持多種動(dòng)態(tài)導(dǎo)入寫(xiě)法：
   • require.ensure()
     
     
   • import()
     
   • ES6(async、await)
     
     一旦使用了動(dòng)態(tài)導(dǎo)入語(yǔ)法，webpack在打包的時(shí)候就會(huì)自動(dòng)分離bundle.js，進(jìn)而生成與bundle.js有自動(dòng)關(guān)聯(lián)關(guān)系的其他小的JavaScript文件。

     動(dòng)態(tài)導(dǎo)入和懶加載

     使用代碼分離技術(shù)運(yùn)行小demo之后，會(huì)發(fā)現(xiàn)代碼確實(shí)是分離了，但是加載網(wǎng)頁(yè)的時(shí)候所有資源是一口氣按順序全都下載。代碼分離技術(shù)本身并沒(méi)有起到任何的優(yōu)化作用，反而由于更多的http請(qǐng)求，又恰好在不支持HTTP2.0的HTTP服務(wù)器上運(yùn)行時(shí)，可能還會(huì)降低加載的性能。
     設(shè)想一下，如果分離的文件能在真正需要的時(shí)候才加載，這樣就能提高加載渲染性能。因此，懶加載（按需加載）的思想就是在用戶(hù)進(jìn)行交互的時(shí)候，加載其所需的資源。懶加載的思想結(jié)合代碼分離的方案，這就啟發(fā)了應(yīng)該在用戶(hù)交互的代碼中加入動(dòng)態(tài)導(dǎo)入的寫(xiě)法。

     按需加載到底是優(yōu)化還是基礎(chǔ)

     根據(jù)上一節(jié)最后給出的啟發(fā)方案：在用戶(hù)交互的代碼里加入動(dòng)態(tài)導(dǎo)入的寫(xiě)法，使得用戶(hù)交互時(shí)才引入所需的模塊。看到這里，內(nèi)心很難平靜。按需加載從效果上看，提高了加載性能，這自然算是優(yōu)化。然而從實(shí)現(xiàn)的角度上看，除非有合適的定制化的插件或者自身水平極高能夠改寫(xiě)webpack對(duì)模塊的操縱行為，否則必然需要修改業(yè)務(wù)代碼。從代碼成分的角度看，這種寫(xiě)法是代碼***。總的說(shuō)來(lái)，如果把按需加載看成是項(xiàng)目實(shí)現(xiàn)的基礎(chǔ)，那在實(shí)現(xiàn)功能的時(shí)候就要順帶實(shí)現(xiàn)。否則，優(yōu)化之路必然很漫長(zhǎng)，但即使再漫長(zhǎng)，抓住本質(zhì)思想就并不復(fù)雜。

     方案

   • 采用框架，使得ui組件可以按需加載
     react：https://reacttraining.com/react-router/web/guides/code-splitting
     vue：https://alexjoverm.github.io/2017/07/16/Lazy-load-in-Vue-using-Webpack-s-code-splitting/
   • 動(dòng)態(tài)路由
     選型路由組件的時(shí)候，優(yōu)先查看是否有根據(jù)路由對(duì)資源懶加載的能力
     https://react-guide.github.io/react-router-cn/docs/guides/advanced/DynamicRouting.html
   • 統(tǒng)一資源暴露
     書(shū)寫(xiě)一個(gè)或者多個(gè)模塊來(lái)統(tǒng)一管理資源，主要功能是使用動(dòng)態(tài)導(dǎo)入的寫(xiě)法導(dǎo)出其他的模塊的內(nèi)容，平時(shí)在業(yè)務(wù)代碼中用統(tǒng)一資源暴露的模塊去獲取真正有用的對(duì)象。偽代碼如下:
     
     

創(chuàng)新互聯(lián)www.cdcxhl.cn，專(zhuān)業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開(kāi)啟，新人活動(dòng)云服務(wù)器買(mǎi)多久送多久。

名稱(chēng)欄目：webpack基礎(chǔ)——代碼分離-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://www.chinadenli.net/article22/dsddjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、云服務(wù)器、網(wǎng)站導(dǎo)航、虛擬主機(jī)、品牌網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)