查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大,

剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看器)==

== 介绍1:webpack-bundle-analyzer(可视化)==

将捆绑内容表示为方便的交互式可缩放树形图

如下效果图:

模块功能:

  • 意识到你的文件打包压缩后中真正的内容
  • 找出哪些模块组成最大的大小
  • 找到错误的模块
  • 优化它!
  • 最好的事情是它支持缩小捆绑!它解析它们以获得实际大小的捆绑模块。它也显示他们的gzipped大小!

安装和使用

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

在webpack.prod.conf.js中:

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

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

==BundleAnalyzerPlugin== 构造函数可以采用默认的可选配置对象:在plugins下添加以下代码

new BundleAnalyzerPlugin({
// 可以是`server`,`static`或`disabled`。
// 在`server`模式下,分析器将启动HTTP服务器来显示软件包报告。
// 在“静态”模式下,会生成带有报告的单个HTML文件。
// 在`disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
analyzerMode: 'server',
// 将在“服务器”模式下使用的主机启动HTTP服务器。
analyzerHost: '127.0.0.1',
// 将在“服务器”模式下使用的端口启动HTTP服务器。
analyzerPort: 8888,
// 路径捆绑,将在`static`模式下生成的报告文件。
// 相对于捆绑输出目录。
reportFilename: 'report.html',
// 模块大小默认显示在报告中。
// 应该是`stat`,`parsed`或者`gzip`中的一个。
// 有关更多信息,请参见“定义”一节。
defaultSizes: 'parsed',
// 在默认浏览器中自动打开报告
openAnalyzer: true,
// 如果为true,则Webpack Stats JSON文件将在bundle输出目录中生成
generateStatsFile: false,
// 如果`generateStatsFile`为`true`,将会生成Webpack Stats JSON文件的名字。
// 相对于捆绑输出目录。
statsFilename: 'stats.json',
// stats.toJson()方法的选项。
// 例如,您可以使用`source:false`选项排除统计文件中模块的来源。
// 在这里查看更多选项:https: //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
logLevel: 'info'
}),

启动服务:

npm run build,等待一会,浏览器会自动打开一个页面展示项目组件之间的依赖关系。

最新文章

  1. stringstream的基本用法
  2. bootstrap制作搜索框及添加回车搜索事件
  3. ssh默认端口更改后,如何正常使用git?
  4. 深入理解C语言中的指针与数组之指针篇
  5. Sheet can not be presented because the view is not in a window的解决办法,和window的简单使用
  6. 关于ADO.NET 实体数据数据模型无法为Mysql 选择6.0 解决方案
  7. Activity透明/半透明效果的设置transparent(两种实现方法)
  8. 阿里云ECS试用
  9. C语言之预处理命令
  10. P3P解决cookie存取的跨域问题
  11. Fragment禁止预加载
  12. pig运行方法:本地与云上
  13. php 的优化
  14. echarts统计图Y轴(或X轴)文字过长问题解决
  15. 【转】解决CentOS 64位系统vsftpd 530 login incorrect的问题
  16. 大量界面刷新时手动Dispose也是有必要的
  17. Java Socket 死循环while如何判断客户端断开
  18. Centos7 定时任务启动python脚本发送邮件
  19. wpf image 指定Stretch="None" 不拉伸的时候,仍然拉伸的解决办法
  20. STM32 串口通信使用奇偶校验

热门文章

  1. Eclipse jvm启动参数在哪设置
  2. 通过Java编码获取String分行字符串的内容
  3. NUMA架构的优缺点
  4. 微信小程序 drawImage 问题
  5. linux配置Nginx启动,停止
  6. go channel 阻塞
  7. 20145313 《Java程序设计》第十周学习总结
  8. Linux 软件看门狗 watchdog 喂狗
  9. python的socket的tcp协议编程
  10. HTTP协议Keep-Alive模式详解和HTTP头字段总结