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. k8s使用Glusterfs动态生成pv

    一.环境介绍 [root@k8s-m ~]# cat /etc/hosts127.0.0.1 localhost localhost.localdomain localhost4 localhost4 ...

  2. mysql中count的注意事项

    1.count()函数是用来统计表中记录的一个函数,返回匹配条件的行数. 2.count()语法: (1)count(*)---包括所有列,返回表中的记录数,相当于统计表的行数,在统计结果的时候,不会 ...

  3. [代码]--给任意网站添加聊天功能，随时聊（fa）天（che）

    感谢“topurl.cn”制作此功能并分享. 这是一段代码,在打开的网页中使用,可以加载一个外挂形式的聊天室功能, 就可以和同样访问此网站进行相同操作的网友进行聊(fa)天(che)了. 使用方法: ...

  4. java读取excel获取数据写入到另外一个excel

    pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  5. java http 伪造请求头

    import java.io.BufferedReader; import java.io.InputStream; import java.io.InputStreamReader; import ...

  6. rsync 服务器搭建遇到的问题

    问题一: @ERROR: chroot failed rsync error: error starting client-server protocol (code 5) at main.c(152 ...

  7. 第三十八天 GIL 进程池与线程池

    今日内容: 1.GIL 全局解释器锁 2.Cpython解释器并发效率验证 3.线程互斥锁和GIL对比 4.进程池与线程池 一.全局解释器锁 1.GIL:全局解释器锁 GIL本质就是一把互斥锁,是夹在 ...

  8. HDU5745-La Vie en rose-字符串dp+bitset优化

    这题现场的数据出水了,暴力就能搞过. 标解是拿bitset做,转移的时候用bitset优化过的操作(与或非移位)来搞,复杂度O(N*M/w) w是字长 第一份标程的思路很清晰,然而后来会T. /*-- ...

  9. SQL Server查询优化器的工作原理

    SQL Server的查询优化器是一个基于成本的优化器.它为一个给定的查询分析出很多的候选的查询计划,并且估算每个候选计划的成本,从而选择一个成本最低的计划进行执行.实际上,因为查询优化器不可能对每一 ...

  10. 一：Newtonsoft.Json 支持序列化与反序列化的.net 对象类型；

    导航目录: Newtonsoft.Json 概述 一:Newtonsoft.Json 支持序列化与反序列化的.net 对象类型:    二:C#对象.集合.DataTable与Json内容互转示例: ...