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. phpstorm显示页面不停的在indexing转圈中,并且文件名还一直在刷新

    打开 File下的 Invalidate Caches / Restart...下的 Invalidate and Restart. 便可以了 ......

  2. Struts2——通配符，Action Method_DMI

    Action wildcard 通配符(配置量降到最低) 使用通配符,就是为了配置简便,但是一定遵守“约定优于配置”原则,约定就是做项目之前最好事先与项目组的人或是自己规定好命名规则. 多个*  {1 ...

  3. python爬虫之Anaconda安装

    Anaconda概述 Anaconda是一个用于科学计算的Python发行版,支持 Linux, Mac, Windows系统,提供了包管理与环境管理的功能,可以很方便地解决多版本python并存.切 ...

  4. CentOS7安装使用ab压力测试工具

    执行安装命令:yum -y install httpd-tools 安装完毕,执行:ab -help,显示命令参数 命令模板:ab -c 100 -n 10000 待测试网站(建议完整路径) -c 即 ...

  5. 设计模式笔记：开闭原则（OCP，The Open-Closed Principle）

    1. 开闭原则概述 开闭原则(OCP,The Open-Closed Principle)两个主要特征: (1)对扩展开放(open for extension):模块的行为的可以扩展的,当应用的需求 ...

  6. nginx 卸载后重新安装/etc/nginx配置文件没了,cannot open /etc/nginx/nginx.conf (No such file or directory)

    sudo apt-get --purge remove nginx-common sudo apt-get --purge remove nginx* sudo apt-get autoremove ...

  7. jQuery插件开发的基本形式

    (function ($, window, document, undefined) { "use strict"; var defaults = { pageIndex: 0, ...

  8. Jenkins+PowerShell持续集成环境搭建(二)控制台项目

    1. 新建一个名字为HelloWorld.Console的Freesyle项目: 2. 配置源码管理: 3. 编译配置: 版本:选择MSBuild4 文件:D:\CI\Config\HelloWorl ...

  9. 在线制作css动画——CSS animate

    熟悉CSS的人都知道,CSS可以实现很多漂亮的动画,特别是它的在线功能,能够帮助人们解决很多制作动画的效果.今天特别推荐一个在线CSS插件功能——cssanimate,这个最大的特色就是以图形界面方式 ...

  10. luogu3391

    P3391 [模板]文艺平衡树(Splay) 题目背景 这是一道经典的Splay模板题——文艺平衡树. 题目描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转 ...