本文作者:问几许

性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具 webpack-bundle-analyzer)

问几许 4年前 ( 2018-04-27 ) 4006 抢沙发
性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具 webpack-bundle-analyzer)摘要: 很多程序猿只知道用 webpack 打包,却不知道每个文件具体打包了哪些东西,本篇文章就是介绍一个 webpack 可视化工具 webpack-bundle-analyzer ,将...

很多程序猿只知道用 webpack 打包,却不知道每个文件具体打包了哪些东西,本篇文章就是介绍一个 webpack 可视化工具 webpack-bundle-analyzer ,将捆绑内容表示为方便的交互式可缩放树形图,让你明白你所构建包中真正引入的内容,我们可以借助她,发现它大体有哪些模块组成,找到不合时宜的存在,然后优化它。效果如下图:

webpack-bundle-analyzer.png

插件功能:

  • 每个文件包含的所有模块及其所占大小

  • 找出错误模块

  • 缩小捆绑


安装:

npm install --save-dev webpack-bundle-analyzer

在webpack.config.js中添加:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    plugins: [
        new BundleAnalyzerPlugin()
    ]
}

在 package.json 中添加:

"analyze": "NODE_ENV=production npm_config_report=true npm run build"

启动服务:

生产环境查看:npm run build --report 或 正常build 即可启动查看器

开发环境查看:webpack -p --progress 或启动正常devServer服务即可启动查看器!

显示:

然后默认打开一个 http://127.0.0.1:8888/  的网站。

文章版权及转载声明

作者:问几许本文地址:https://wenjixu.com/blog/33.html发布于 4年前 ( 2018-04-27 )
文章转载或复制请以超链接形式并注明出处问几许

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

评论列表 (暂无评论,4006人围观)参与讨论

还没有评论,来说两句吧...