你值得擁有的幾款實用webpack4性能分析插件【測評與推薦】

時間 2020-01-09

標籤值得擁有實用 webpack4 webpack 性能分析插件測評與推薦欄目系統性能简体版

原文原文鏈接

重點解決的問題

在webpack打包的過程當中有沒有想過這其中的打包過程是怎麼樣的呢？有沒有什麼辦法能反映出這個打包的過程和結果呢？webpack打包太慢須要優化怎麼辦呢？或許如下這幾款插件能幫助到你，記得點個贊哈哈。javascript

如下插件均兼容webpack4java

ProgressBarPlugin

這款插件能把打包的進度以進度條的形式顯示出來，同時也能夠自定義顯示百分比的格式樣式。webpack

資源地址

https://www.npmjs.com/package/progress-bar-webpack-pluginweb

安裝&使用

npm i progress-bar-webpack-pluginsql

var ProgressBarPlugin = require('progress-bar-webpack-plugin');
// ...
plugins: [
  new ProgressBarPlugin({
      format: '  build [:bar] ' + chalk.green.bold(':percent') + ' (:elapsed seconds)',
      clear: false
    })
]
複製代碼

注意

這裏進度百分好比果要彩色顯示的話，須要多安裝一個包chalknpm

const chalk = require('chalk');
複製代碼

評價

這款插件能夠說是很是實用的，今後告別傻傻的等待。json

SpeedMeasurePlugin

尋尋覓覓找了半天，卻在燈火闌珊處，看到的第一眼就認定了，沒錯，就是它。這款插件能將每個plugin每個loader的打包時間以及總打包時長統計出來。後端

資源地址

https://www.npmjs.com/package/speed-measure-webpack-plugin安全

安裝&使用

npm i speed-measure-webpack-plugin
複製代碼

// webpack.config.js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

const webpackConfig = smp.wrap({
    module:{
        rules:[
            // ...
        ]
    },
    plugins: [
        // ...
    ]
});

module.exports = webpackConfig;
複製代碼

這裏配置的意思是須要直接將原來的webpack配置傳入到插件提供的方法裏，而後導出。app

注意

這裏每個loader/plugins的打包時長相加並不等於總時長。由於在webpack中，一般loader/plugins的處理過程是異步的，除非有相互依賴的狀況。只要找出耗時最長的過程，儘可能去優化它，就能顯著減小打包時長。

評價

能夠講是優化分析提升效率的必備工具。

BundleAnalyzerPlugin

又是一個很是nice的插件，誰用誰知道，在打包結束以後能將各個包的內容、信息、佔比以圖形化界面表現出來，界面中還有其餘的交互和過濾器。

安裝&使用

npm i webpack-bundle-analyzer
複製代碼

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// ...
module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
        analyzerMode: 'static',
        openAnalyzer: true,
        logLevel: 'info'
    })
  ]
}
複製代碼

注意

按照默認配置的話，在打包的最後會啓動一個服務，須要手動去關閉，若是後續還有其餘動做的話（如集成CI）就會阻塞調，這是咱們不但願的，使用推薦你們使用上面的配置。

評價

這個插件都很熟悉了，也是屬於必備工具之一。

DashboardPlugin

想要耍帥的看這裏，該插件擁有很是酷炫的界面，以讀秒的方式記錄打包進度，也能對輸出包的大小進行分析，顯示每一個包裏各個內容的佔比。

資源地址

https://www.npmjs.com/package/webpack-dashboard

安裝&使用

npm i webpack-dashboard
複製代碼

// webpack.config.js
var DashboardPlugin = require("webpack-dashboard/plugin");
// ...
plugins: [new DashboardPlugin()];
複製代碼

// package.json
"scripts": {
    "build": "webpack-dashboard -- webpack --mode production"
}
複製代碼

注意

有一點很奇怪，貌似插件的兼容性有點問題，若是像官網那樣去設置端口號的話，編譯完成後的分析結果沒法完整顯示出來。這裏給出的解決方案是直接使用new DashboardPlugin()，不要設置自定義端口號。

評價

界面是挺好看的，可是用多幾回就會發現，其實沒有想象中的實用。不能一目瞭然很直觀的分析出問題，能夠嚐嚐鮮，但不大建議使用。

DuplicatePackageCheckerPlugin

當webpack打包了相同的包時這款插件能給出相應的提示。例如打包了兩個loadsh包，最後輸出結果時就會有提示。

資源地址

https://www.npmjs.com/package/duplicate-package-checker-webpack-plugin

安裝&使用

npm i duplicate-package-checker-webpack-plugin
複製代碼

const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");

module.exports = {
  plugins: [new DuplicatePackageCheckerPlugin()]
};
複製代碼