// 1. 安装
cnpm install webpack-bundle-analyzer --save-dev // 2. 在/build/webpack.prod.conf.js文件中引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 然后配置一下:
plugins: [
new BundleAnalyzerPlugin()
] // 3. 在package.json文件中配置:
"scripts": {
"analyz": "NODE_ENV=production npm_config_report=true npm run build"
} // 4. 运行(会自动在浏览器打开:http://127.0.0.1:8888/)
npm run build

然后就会出现一张类似这样的图片

关于打包后文件太大的优化可查看 vue打包文件太大怎么办

Vue打包优化之分析工具webpack-bundle-analyzer的更多相关文章

  1. vue 打包优化

    vue 打包优化 路由按需加载 通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后 ...

  2. 【转】Eclipse MAT内存分析工具(Memory Analyzer Tool)

    Eclipse MAT内存分析工具(Memory Analyzer Tool) MAT内存分析工具# MAT是Memory Analyzer的简称,它是一款功能强大的Java堆内存分析器.可以用于查找 ...

  3. 内存分析工具-MAT(Memory Analyzer Tool)

    内存分析工具-MAT(Memory Analyzer Tool) 首先查看如下代码,main函数中有一个成员变量map,map里被循环放入对象Hanson,hanson持有姓名和age还有friend ...

  4. webpack & bundle analyzer

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

  5. Eclipse MAT内存分析工具(Memory Analyzer Tool)

    MAT内存分析工具 MAT是Memory Analyzer的简称,它是一款功能强大的Java堆内存分析器.可以用于查找内存泄露以及查看内存消耗情况.MAT是基于Eclipse开发的,是一款免费的性能分 ...

  6. Android 内存分析工具 MAT(Memory Analyzer Tool)

    如果使用DDMS确实发现了我们的程序中存在内存泄漏,那又如何定位到具体出现问题的代码片段,最终找到问题所在呢?如果从头到尾的分析代码逻辑,那肯定 会把人逼疯,特别是在维护别人写的代码的时候.这里介绍一 ...

  7. 内存映像分析工具Eclipse Memory Analyzer

    1. Eclipse Memory Analyzer安装 Help ->Eclipse Marketplace,搜索Memory,点击install,->confirm->同意证书内 ...

  8. vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画

    当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的 异步 ...

  9. vue打包优化

    网站首页第一次加载很慢,优化过后从十多二十秒缩短到了几秒,主要是打包的时候按需加载了,然后使用了gzip压缩. 这是优化之前的 发现vendor特别大,所有引用的第三方库都会打到这个包里面;另外就是之 ...

随机推荐

  1. 【视频】设计模式(C++)视频讲解

    设计模式(C++) 视频网址: http://www.qghkt.com/ 设计模式(C++)视频地址: https://ke.qq.com/course/318637?tuin=a508ea62 目 ...

  2. 【原】Java学习笔记032 - 多线程

    package cn.temptation; public class Sample01 { public static void main(String[] args) { /* * [进程]:正在 ...

  3. emacs 文本替换

    文本替换方法: M-% (query-replace) 输入 响应 SPC 或者 y 替换当前匹配并前进到下一个匹配处 DEL 或者 n 忽略此次匹配并前进到下一个匹配处 . 替换当前匹配并退出 , ...

  4. angularjs(显示和隐身) 依赖注入

    1.angularjs 隐身参数注入control: 1.control名称 , 2.function,在function内部直接传递参数和方法. var myapp=angular.model(&q ...

  5. JAVA进阶23

    1.统计文件夹大小 package cn.demo02; import java.io.File; /** * @Classname DirTest03 * @Description TODO * @ ...

  6. Object 与 T的差别 导致swagger 的model 显示的数据为空

    情景复现: 在整合swagger的时候,自己对原本定于的Object的data做了修改,把Object修改为了T,data的set方法的返回类型由于编译器没有报错,就没有去做修改, 这个时候就导致了, ...

  7. pytorch错误:Missing key(s) in state_dict、Unexpected key(s) in state_dict解决

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 在模型训练时加上: model = nn.DataParallel(model)cudnn.bench ...

  8. PHP变量传值赋值和引用赋值,变量销毁

    <?php $a = 100; $b = 200; var_dump($a,$b); //int(100) int(200) ?> php中,上面的代码,变量是怎么存放的呢? 上面的代码变 ...

  9. Java 异常体系(美团面试)

    Java把异常作为一种类,当做对象来处理.所有异常类的基类是Throwable类,两大子类分别是Error和Exception. 系统错误由Java虚拟机抛出,用Error类表示.Error类描述的是 ...

  10. LODOP获取打印成功,是否加入队列

    之前博文介绍过获取打印机状态码 LODOP获取打印机状态码和状态码含义测试,但是打印机种类千差万别,状态码不一定准确,特别是打印成功的状态码,获取任务不在队列,可以判断打印成功,删除任务也是任务不在队 ...