資訊專欄INFORMATION COLUMN
摘要：中配置的順序有什么關(guān)系，每一個(gè)公用模塊的抽取邏輯是什么這個(gè)沒有找到官方的解釋，通過實(shí)踐，我認(rèn)為應(yīng)該是倒序考慮的，首先是啟動(dòng)腳本放在數(shù)組的最后一個(gè)文件中，例如中。例如中的和共同依賴，則中也抽取。包含頁面額外的配置信息
webpack.optimize.CommonsChunkPlugin插件用于抽取模塊中的復(fù)用部分，以減少打包的代碼量，我們還需要考慮到緩存的優(yōu)化
首先是文件名包含文件的hash值，只有在文件有變動(dòng)時(shí)hash值才會(huì)變
其次我們想要將引用的js資源進(jìn)行幾個(gè)文件的拆分，
第一個(gè)文件是最不經(jīng)常變動(dòng)的第三方的庫(kù)文件，
第二個(gè)文件是業(yè)務(wù)的公用組件
第三個(gè)文件是每一個(gè)頁面的js代碼
我們的最佳配置如下：
entry: {
vender:["./src2/Vue.js","./src2/vender.js"], //指明vender的庫(kù)
common: ["./src2/component1.js","./src2/component2.js"],
global:["./src2/global.js"], //需要全局進(jìn)行配置的代碼
page1: ["./src2/page1.js"],
page2: ["./src2/page2.js"]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ["common","vender","boot"],
filename: "[name].[chunkhash].js",
minChunks: 2
})
]
minChunks是配置模塊復(fù)用多少次以上進(jìn)行抽取。
chunkhash 是這個(gè)chunk的hash，而hash是對(duì)所有打包的js整體生成的hash，所以為了對(duì)緩存的優(yōu)化，我們采用chunkhash。
CommonsChunkPlugin中配置的name和entry中配置的入口之間有什么關(guān)系？如果CommonsChunkPlugin 中配置的name在entry中存在，那么這個(gè)抽取的模塊首先是包含enry中指定的js文件，然后再考慮包含抽取其他entry中的公用部分。
為什么要在common中配置boot？因?yàn)榕渲肅ommonsChunkPlugin插件以后，就需要在window上掛載window["webpackJsonp"]方法，這個(gè)方法中有所有chunk的chunkhash，所以只要有chunk變化，那么這個(gè)腳本就變化，所以應(yīng)該把這個(gè)啟動(dòng)腳本多帶帶抽成一個(gè)文件，否則就會(huì)影響其他不變的文件也改變hash值。
CommonsChunkPlugin中配置的name順序有什么關(guān)系，每一個(gè)公用模塊的抽取邏輯是什么？這個(gè)沒有找到官方的解釋，通過實(shí)踐，我認(rèn)為應(yīng)該是倒序考慮的，首先是啟動(dòng)腳本放在數(shù)組的最后一個(gè)文件中，例如boot中。
每一個(gè)模塊的邏輯如下：
首先看自己有沒有對(duì)應(yīng)的entry，如果有則抽取entry對(duì)應(yīng)的模塊，并遞歸抽取模塊中公用的模塊。例如common中的component1.js和component2.js共同依賴jquery，則common中也抽取jquery。
其次看數(shù)組中是否還有上一個(gè)元素，如果沒有則將所有entry中剩余沒有抽取的公用模塊也都抽取出來，如果有則交給上一個(gè)元素，自己也就執(zhí)行完了。例如vender先將Vue.js和vender.js抽取出來，然后發(fā)現(xiàn)還有common模塊，所以自己就執(zhí)行完了，common先將component1.js和component2.js抽取出來以后，發(fā)現(xiàn)上面沒有文件了，所以就把entry中剩余沒有抽取的公共模塊也抽取出來了，比如page1.js和page2.js公用的componet4.js。
這樣打包以后我們需要保證頁面中文件引用的順序，因?yàn)樗麄冎g有了依賴關(guān)系，例如上面的配置頁面的引用順序應(yīng)該是
1 boot.js
2 vender.js
3 common.js
然后是每一個(gè)頁面的js page1.js 或者page2.js
HtmlwebpackPlugin插件提供了 chunksSortMode方法，可以對(duì)頁面中引用的chunk進(jìn)行排序，我們先定義chunk的順序數(shù)組，然后類似于數(shù)組的sort，用小的減去大的返回正序。
var chunksort = ["boot","vender","common","global"];
new HtmlwebpackPlugin({
chunks: ["boot","vender","common","global",page.outputPath],
title: page.title,
// extra: extra, //包含頁面額外的配置信息
template: "src/index.html",
filename: page.outputPath + ".html",
chunksSortMode: function (a, b) {
var aIndex =chunksort.indexOf(a.names[0]);
var bIndex =chunksort.indexOf(b.names[0]);
aIndex = aIndex < 0 ? chunksort.length + 1 : aIndex;
bIndex = bIndex < 0 ? chunksort.length + 1 : bIndex;
return aIndex - bIndex;
}
})
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/81475.html
由于容器虛擬化技術(shù)可以充分利用硬件資源，對(duì)于開發(fā)團(tuán)隊(duì)就像夢(mèng)想照進(jìn)了現(xiàn)實(shí)。盡管容器化沒有推翻虛擬機(jī)在企業(yè)應(yīng)用開發(fā)和部署上的地位，但是Docker等工具在實(shí)現(xiàn)開發(fā)、測(cè)試和部署大規(guī)模現(xiàn)代軟件的速度和敏捷性方面大展身手。Docker容器具有諸多優(yōu)點(diǎn)：無需復(fù)雜的hypervisor、可移植性、資源隔離性、輕量級(jí)、開放標(biāo)準(zhǔn)、完美適應(yīng)微服務(wù)架構(gòu)。眾多的應(yīng)用通過容器隔離起來，相互獨(dú)立地運(yùn)行在同一臺(tái)宿主機(jī)上，哪家公...
摘要：最佳實(shí)踐框架配置開源軟件介紹是國(guó)內(nèi)首個(gè)開源的生產(chǎn)級(jí)無服務(wù)器。詳細(xì)介紹項(xiàng)目地址框架簡(jiǎn)化了新應(yīng)用的初始搭建以及開發(fā)過程，云幫支持平臺(tái)部署類應(yīng)用。配置數(shù)據(jù)庫(kù)云幫提供的相關(guān)配置目錄結(jié)構(gòu)如下，配置文件內(nèi)容僅供參考。 【Rainbond最佳實(shí)踐】Spring Boot框架配置MySQL Rainbond開源軟件介紹： Rainbond是國(guó)內(nèi)首個(gè)開源的生產(chǎn)級(jí)無服務(wù)器PaaS。 深度整合基于Kuber...
摘要：開發(fā)最佳入門實(shí)踐網(wǎng)上一些介紹入門的教程，感覺都不是很完整和全面，也沒有告訴初學(xué)的同學(xué)們一些需要注意的地方。本文所介紹的是在上搭建最佳的開發(fā)環(huán)境，給使用的開發(fā)人員最大的方便。開發(fā)最佳入門實(shí)踐最后在程序中添加上加載庫(kù)文件的代碼。 AndroidStudio NDK開發(fā)最佳入門實(shí)踐 網(wǎng)上一些介紹AndroidStudio NDK入門的教程，感覺都不是很完整和全面，也沒有告訴初學(xué)Androi...
閱讀 1833·2021-11-25 09:43
閱讀 1335·2021-11-22 15:08
閱讀 3735·2021-11-22 09:34
閱讀 3225·2021-09-04 16:40
閱讀 3002·2021-09-04 16:40
閱讀 542·2019-08-30 15:54
閱讀 1335·2019-08-29 17:19
閱讀 1752·2019-08-28 18:13
