webpack 打包完成後,會輸出一堆資訊。如下。
我們來解釋一下這些資訊。
hash 值,代表本次打包對應的唯一乙個hash值。
version ,本次打包webpack 的版本。
time,本次打包用時。
asset 指,打包出的檔案是 bundle.js
size 指,打包後檔案大小。
chunks ,我們在打包的時候,這一次比較簡單只打包成乙個檔案,有的時候,會打包成多個檔案,每個檔案都有自己的id值,chunks裡面就是這些檔案對應的id值與它有關聯的js檔案的id。
chunk name,就是這個asset 的chunk 的名字。這個「main」,是怎麼來的呢。
在webpack.config.js 中
entry: "./src/index.js",
實際上等價與
entry:
這個chunk name 的 「main」,就來自於配置檔案中的「main」。
繼續往下看,entrypoint main = ... 告訴我們打包的入口檔案是...
然後先打包 *** 檔案
再打包***檔案
最後,有乙個警告。它告訴我們,我們沒有設定模式「mode」,它給我們添了預設模式「production」。
為了消除警告,我們給它加上 mode。當然,mode 的值,也可以是『development』。如果是development的時候,打包後的**就比價可讀。下面是webpack.config.js。
const path = require('path');
module.exports =
}
webpack 三(解析打包輸出內容)
const path require path module.exports 打包之後 上邊幾個引數 hash 打包時使用的雜湊值 version 每次打包時使用的webpack的版本號 time 當前包的整體打包耗時 build at 打包的時間 asset 打包出來的檔案的名字 size 打包出...
webpack打包快取 webpack打包效能分析
webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮,速度很慢 webpack parallel uglify plugin外掛程式可以並行執行uglifyjs外掛程式,這可以有效減少構建時間,當然,該外掛程式應用於生產環境而非開發環境,配置如下 var paralleluglifypl...
webpack打包快取 webpack打包優化探索
雖然webpack的已經公升級到了webpack4,而我們目前還在使用 webpack3,但其中的優化點都大同小異,公升級後同樣適用。效能優化初步原則 這三條原則永遠是一切優化的前提 優化配置 公升級webpack 3,優化js的編譯能力 scope hoisting 1performance 減小...