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. CodeForces 126B Password

    题目链接:http://codeforces.com/problemset/problem/126/B 题目大意: 多组数据每组给定1个字符串S,问是否存在S的一个尽量长的子串,同时是S的前缀和后缀, ...

  2. Hbase存储思想

  3. Hbase的作用

    实时动态增加列 多版本的意思为多个用户地址,多个用户信息,多个用户号码

  4. python爬虫之PyQuery的基本使用

    PyQuery库也是一个非常强大又灵活的网页解析库,如果你有前端开发经验的,都应该接触过jQuery,那么PyQuery就是你非常绝佳的选择,PyQuery 是 Python 仿照 jQuery 的严 ...

  5. spring 启动脚本分析

    参考:JVM 参数使用总结 参考:java  -Xms -Xmx -XX:PermSize -XX:MaxPermSize 参考:JVM调优总结 -Xms -Xmx -Xmn -Xss 参考:JAVA ...

  6. [离散时间信号处理学习笔记] 10. z变换与LTI系统

    我们前面讨论了z变换,其实也是为了利用z变换分析LTI系统. 利用z变换得到LTI系统的单位脉冲响应 对于用差分方程描述的LTI系统而言,z变换将十分有用.有如下形式的差分方程: $\displays ...

  7. x = x &(x-1)

    判断一个数(x)的二进制含有几个1 int func(x) { ; while(x) { countx ++; x = x&(x-); } return countx; } 假定x = 999 ...

  8. pip 解决下载包速度慢的问题

    对于Python开发用户来讲,PIP安装软件包是家常便饭.但国外的源下载速度实在太慢,浪费时间.而且经常出现下载后安装出错问题.所以把PIP安装源替换成国内镜像,可以大幅提升下载速度,还可以提高安装成 ...

  9. #186 path（容斥原理+状压dp+NTT）

    首先只有一份图时显然可以状压dp,即f[S][i]表示S子集的哈密顿路以i为终点的方案数,枚举下个点转移. 考虑容斥,我们枚举至少有多少条原图中存在的边(即不合法边)被选进了哈密顿路,统计出这个情况下 ...

  10. 【XSY2772】数列 特征多项式 数学

    题目描述 给你一个数列: \[ f_n=\begin{cases} a^n&1\leq n\leq k\\ \sum_{i=1}^k(a-1)f_{n-i}&n>k \end{c ...