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