webpackCommonChunk最佳配置

stefan 發布于2019-08-20 14:14 / 2128人閱讀

摘要：中配置的順序有什么關系，每一個公用模塊的抽取邏輯是什么這個沒有找到官方的解釋，通過實踐，我認為應該是倒序考慮的，首先是啟動腳本放在數組的最后一個文件中，例如中。例如中的和共同依賴，則中也抽取。包含頁面額外的配置信息

webpack.optimize.CommonsChunkPlugin插件用于抽取模塊中的復用部分，以減少打包的代碼量，我們還需要考慮到緩存的優化

首先是文件名包含文件的hash值，只有在文件有變動時hash值才會變

其次我們想要將引用的js資源進行幾個文件的拆分，

第一個文件是最不經常變動的第三方的庫文件，

第二個文件是業務的公用組件

第三個文件是每一個頁面的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，所以為了對緩存的優化，我們采用chunkhash。

CommonsChunkPlugin中配置的name和entry中配置的入口之間有什么關系？

如果CommonsChunkPlugin 中配置的name在entry中存在，那么這個抽取的模塊首先是包含enry中指定的js文件，然后再考慮包含抽取其他entry中的公用部分。

為什么要在common中配置boot？

因為配置CommonsChunkPlugin插件以后，就需要在window上掛載window["webpackJsonp"]方法，這個方法中有所有chunk的chunkhash，所以只要有chunk變化，那么這個腳本就變化，所以應該把這個啟動腳本多帶帶抽成一個文件，否則就會影響其他不變的文件也改變hash值。

CommonsChunkPlugin中配置的name順序有什么關系，每一個公用模塊的抽取邏輯是什么？

這個沒有找到官方的解釋，通過實踐，我認為應該是倒序考慮的，首先是啟動腳本放在數組的最后一個文件中，例如boot中。
每一個模塊的邏輯如下：

首先看自己有沒有對應的entry，如果有則抽取entry對應的模塊，并遞歸抽取模塊中公用的模塊。例如common中的component1.js和component2.js共同依賴jquery，則common中也抽取jquery。

其次看數組中是否還有上一個元素，如果沒有則將所有entry中剩余沒有抽取的公用模塊也都抽取出來，如果有則交給上一個元素，自己也就執行完了。例如vender先將Vue.js和vender.js抽取出來，然后發現還有common模塊，所以自己就執行完了，common先將component1.js和component2.js抽取出來以后，發現上面沒有文件了，所以就把entry中剩余沒有抽取的公共模塊也抽取出來了，比如page1.js和page2.js公用的componet4.js。

這樣打包以后我們需要保證頁面中文件引用的順序，因為他們之間有了依賴關系，例如上面的配置頁面的引用順序應該是
1 boot.js
2 vender.js
3 common.js
然后是每一個頁面的js page1.js 或者page2.js

如何保證頁面中js文件的引用順序?

HtmlwebpackPlugin插件提供了 chunksSortMode方法，可以對頁面中引用的chunk進行排序，我們先定義chunk的順序數組，然后類似于數組的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;
    }
})

云服務器 GPU云服務器最佳配置方法服務器最佳配置云服務器的最佳配置 webpackCommonChunk

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/81475.html

企業級容器安全最佳實踐

由于容器虛擬化技術可以充分利用硬件資源，對于開發團隊就像夢想照進了現實。盡管容器化沒有推翻虛擬機在企業應用開發和部署上的地位，但是Docker等工具在實現開發、測試和部署大規模現代軟件的速度和敏捷性方面大展身手。Docker容器具有諸多優點：無需復雜的hypervisor、可移植性、資源隔離性、輕量級、開放標準、完美適應微服務架構。眾多的應用通過容器隔離起來，相互獨立地運行在同一臺宿主機上，哪家公...

AJie 2019-06-28 15:02 評論0 收藏0
【Rainbond最佳實踐】Spring Boot框架配置MySQL

摘要：最佳實踐框架配置開源軟件介紹是國內首個開源的生產級無服務器。詳細介紹項目地址框架簡化了新應用的初始搭建以及開發過程，云幫支持平臺部署類應用。配置數據庫云幫提供的相關配置目錄結構如下，配置文件內容僅供參考。【Rainbond最佳實踐】Spring Boot框架配置MySQL Rainbond開源軟件介紹： Rainbond是國內首個開源的生產級無服務器PaaS。深度整合基于Kuber...

xingqiba 2019-08-15 13:37 評論0 收藏0
AndroidStudio NDK開發最佳入門實踐

摘要：開發最佳入門實踐網上一些介紹入門的教程，感覺都不是很完整和全面，也沒有告訴初學的同學們一些需要注意的地方。本文所介紹的是在上搭建最佳的開發環境，給使用的開發人員最大的方便。開發最佳入門實踐最后在程序中添加上加載庫文件的代碼。 AndroidStudio NDK開發最佳入門實踐網上一些介紹AndroidStudio NDK入門的教程，感覺都不是很完整和全面，也沒有告訴初學Androi...

macg0406 2019-08-14 15:43 評論0 收藏0