你值得拥有的几款实用webpack4性能分析插件【测评与推荐】

重点解决的问题

在webpack打包的过程当中有没有想过这其中的打包过程是怎么样的呢？有没有什么办法能反映出这个打包的过程和结果呢？webpack打包太慢须要优化怎么办呢？或许如下这几款插件能帮助到你，记得点个赞哈哈。

如下插件均兼容webpack4

ProgressBarPlugin

image

这款插件能把打包的进度以进度条的形式显示出来，同时也能够自定义显示百分比的格式样式。

资源地址

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

安装&使用

npm i progress-bar-webpack-plugin

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

注意

这里进度百分好比果要彩色显示的话，须要多安装一个包chalk

const chalk = require('chalk');
复制代码

评价

这款插件能够说是很是实用的，今后告别傻傻的等待。

SpeedMeasurePlugin

image

寻寻觅觅找了半天，却在灯火阑珊处，看到的第一眼就认定了，没错，就是它。这款插件能将每个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配置传入到插件提供的方法里，而后导出。

注意

这里每个loader/plugins的打包时长相加并不等于总时长。由于在webpack中，一般loader/plugins的处理过程是异步的，除非有相互依赖的状况。只要找出耗时最长的过程，尽可能去优化它，就能显著减小打包时长。

评价

能够讲是优化分析提升效率的必备工具。

BundleAnalyzerPlugin

image

又是一个很是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

image

想要耍帅的看这里，该插件拥有很是酷炫的界面，以读秒的方式记录打包进度，也能对输出包的大小进行分析，显示每一个包里各个内容的占比。

资源地址

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

image

当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()]
};
复制代码

评价

若是webpack配置配得好的话，这款插件的用处就不大。不过也能帮助咱们分析和优化潜在的问题。

总结

通常来讲ProgressBarPlugin，SpeedMeasurePlugin，BundleAnalyzerPlugin这三款插件搭配使用，就能解决大部分有关webpack打包性能分析的问题了。

欢迎关注公众号

image

或者你感兴趣的内容

Re从零开始系列

• 《Re从零开始的组件库构建与发布流程》
• 《Re从零开始的UI库编写生活之规范制定》
• 《Re从零开始的UI库编写生活之按钮》
• 《Re从零开始的UI库编写生活之表单》
• 《Re从零开始的UI库编写生活之表格组件》
• 《Re从零开始的UI库编写生活-步骤管理组件Steps》
• 《Re从零开始的UI库编写生活-Tree组件》
• 《Re从零开始的后端学习之配置Ubuntu+Ngnix+Nodejs+Mysql环境》
• 《Re从零开始的后端学习之配置LAMP环境》

有趣的工具

• 200行代码带你制做实用的节日头像定制小工具【可在线制做，快来试试吧】

web安全系列

• 《web攻防勇者成名录-XSS&CSRF》