webpack-bundle-analyzer —— Webpack 插件和 CLI 实用程序，她可以将打包后的内容束展示为方便交互的直观树状图，让我们知道我们所构建包中真正引入的内容；
我们可以借助她，发现它大体有哪些模块组成，找到不合时宜的存在，然后优化它。
先给你们看我使用它所展示的美丽的界面吧~

是不是很漂亮的就可以知道哪些模块的大小啊~
安装插件的方式是：
在package.json中添加： "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
我项目中有用npm install yarn
我想直接使用yarn analyz
发现报错：
然后我添加yarn add chalk

最后使用

美丽的webpack-bundle-analyzer的更多相关文章

  1. webpack & bundle analyzer

    webpack & bundle analyzer webpack bundle analyzer https://github.com/th0r/webpack-bundle-analyze ...

  2. webpack bundle中parentJsonpFunction的作用

    parentJsonpFunction作用:使异步加载的模块在多个不同的bundle内同步. 假设有多入口文件 bundle1.js: bundl2.js: 在webpack打包后 加载流程: 1.b ...

  3. 使用 Angular CLI 和 Webpack 分析包尺寸

    使用 Angular CLI 和 Webpack 分析包尺寸 对于 Web app 来说,高性能总是最高优先级,对于 Angular 也不例外.但是随着应用复杂度的不断增长,我们如何才能知道哪些内容打 ...

  4. 【webpack系列】从零搭建 webpack4+react 脚手架（五）

    本章节,我们一起来探讨以下问题:如何对编译后的文件进行gzip压缩,如何让开发环境的控制台输出更加高逼格,如何更好的对编译后的文件进行bundle分析等. 1 gzip压缩 如果你想节省带宽提高网站速 ...

  5. webpack 的异步组件 生成commonchunks

    new webpack.optimize.CommonsChunkPlugin({ async: 'async-common', minChunks: function (module, count) ...

  6. [译]Webpack 4 — 神秘的SplitChunksc插件

    原文链接:Webpack 4 - Mysterious SplitChunks Plugin 官方发布了 webpack 4,舍弃了之前的 commonChunkPlugin,增加了 SplitChu ...

  7. Next.js v4.1.4 文档中文翻译【转载】

    最近想稍稍看下 React的 SSR框架 Next.js,因为不想看二手资料, 所以自己跑到 Github上看,Next.js的文档是英文的,看倒是大概也能看得懂, 但有些地方不太确定,而且英文看着毕 ...

  8. pri 知识点

    pri github:https://github.com/prijs/pri 添加路由后动态导入,使用的是 react-loadable:https://github.com/jamiebuilds ...

  9. vue-cli项目优化，缩短首屏加载时间

    1.大文件定位 我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小,然后有目的的解决过大的js文件. 安装:npm install --save- ...

  10. angular6开发不完全笔记（一） -- ng-cli

    新建项目 请在终端/控制台窗口中运行 ng -v 命令. 确定您已安装@angular/cli if没有执行 npm install -g @angular/cli 全局安装 Angular CLI. ...

随机推荐

  1. 实体类注解错误：Could not determine type for: java.util.List

    今天配置实体类注解时,出现以下错误: Caused by: org.hibernate.MappingException: Could not determine type for: java.uti ...

  2. Linux CentOS7 开启80，443端口外网访问权限

    一.查看系统防火墙状态(如果返回 running 代表防火墙启动正常) firewall-cmd --state 二.开启端口外网访问 1.添加端口 返回 success 代表成功(--permane ...

  3. AMD三代锐龙箭在弦上：如此家族堪称豪华

    AMD将于今年年中正式推出第三代Ryzen锐龙处理器,即不集成显示芯片的纯CPU产品,外界猜测可能的时间点会是5月底的台北电脑展. 虽说依然采用AM4接口,也就是X370/470老主板可无压力兼容,但 ...

  4. Go For It ，一个灵活的待办事项列表程序

    导读 Go For It,是我们开源工具系列中的第十个工具,它将使你在 2019 年更高效,它在 Todo.txt 系统的基础上构建,以帮助你完成更多工作. 每年年初似乎都有疯狂的冲动想提高工作效率. ...

  5. FTC诉高通垄断案苹果从中受益

    据外媒报道,美国当地时间周二,美国联邦贸易委员会(FTC)诉芯片制造商高通公司(Qualcomm)垄断案进入了终结辩论阶段.这意味着,这起审判也进入最后阶段,它可能颠覆高通在智能手机时代取得成功的至关 ...

  6. Ubuntu16.04安装使用wps

    Ubuntu16.04安装使用wps 1.wps官网下载并安装wps 此处以Debian安装包为例,官网下载路径 http://www.wps.cn/product/wpslinux/# 直接安装: ...

  7. linux shell系列10 判断某个月中的星期六和星期天

    #!/bin/bashread -p "请输入月份:" month #输入要查找的月份 mon=`date -d "0 month ago" +%m` #计算本 ...

  8. BZOJ1444[Jsoi2009]有趣的游戏——AC自动机+概率DP+矩阵乘法

    题目描述 输入 注意 是0<=P, n , l, m≤ 10. 输出 样例输入 input 1 3 2 2 1 2 1 2 AB BA AA input 2 3 4 2 1 2 1 2 AABA ...

  9. Typecho——数据库无法连接问题

    报错 对不起,无法连接数据库,请先检查数据库配置再继续进行安装 解决方案 创建数据库 reate database databaseName; 远程权限 开启远程权限 GRANT ALL PRIVIL ...

  10. 云服务器ECS

    云服务器Elastic Compute Service(ECS)是阿里云提供的一种基础云计算服务.使用云服务器ECS就像使用水.电.煤气等资源一样便捷.高效.您无需提前采购硬件设备,而是根据业务需要, ...