// 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. Oracle Sql 胡乱记

    /Oracle查询优化改写/ --1.coalesce 返回多个值中,第一个不为空的值 select coalesce('', '', 's') from dual; --2.order by --- ...

  2. Spark RPC框架源码分析(二)RPC运行时序

    前情提要: Spark RPC框架源码分析(一)简述 一. Spark RPC概述 上一篇我们已经说明了Spark RPC框架的一个简单例子,Spark RPC相关的两个编程模型,Actor模型和Re ...

  3. sql Server 2008 数据库自动备份维护计划

    数据库中右键-‘管理’-新建维护计划 创建执行计划,设置备份时间 点击保存 完成 执行后报  ‘’错误5:拒绝访问 ’,时需到文件目录‘属性’→‘安全’设置用户的 ‘写入’ 权限

  4. Java基础系列--08_集合1

    ---恢复内容开始--- 集合当中有很多都是应用到泛型的技术,所以在讲集合之前,应该先将泛型的概念普及一下. 泛型:    (1)泛型是一种类型,但是这种类型是在编译或者调用方法时才确定.    (2 ...

  5. ctrl+shift+r / ctrl+f5 强制(不使用缓存)刷新google chrome网页

    我改了csdn图片后, 一直看到的是旧图片, n天之后, 还是旧图片.猜测应该是用了缓存(且缓存更新逻辑失败, 定是csdn的bug), 用ctrl+shift+r, 或者ctrl+f5, 强制刷新页 ...

  6. 【spring源码分析】IOC容器初始化(十二)

    前言:在doCreateBean方法中还遗留一个问题没有分析:循环依赖.循环依赖在Spring中是非常重要的一个知识点,因此单独进行分析. 什么是循环依赖 循环依赖就是循环引用,两个或两个以上的bea ...

  7. Linux 压缩某个文件夹命令

    tar -zcvf /home/xahot.tar.gz /xahot tar -zcvf 打包后生成的文件名全路径 要打包的目录 例子:把/xahot文件夹打包后生成一个/home/xahot.ta ...

  8. [OIDC in Action] 3. 基于OIDC(OpenID Connect)的SSO(添加Github OAuth 2.0的支持)

    在上上一篇基于OIDC的SSO的登录页面的截图中有出现QQ登录的地方.这个其实是通过扩展OIDC的OpenID Provider来实现的,OpenID Provider简称OP,OP是OIDC的一个很 ...

  9. 2019年3月8日_CCF-A类文章分享

    3月8日下午3点开始,王利朋老师主持实验室会议,实验室全体人员参加.首先王利朋老师就基全本子存在的问题进行了再一次的说明以及如何修改部分内容, 其次,王利朋老师对近段时间做了相关工作总结和下阶段任务分 ...

  10. 类ArrayList

    什么是ArrayList类 Java提供了一个容器 java.util.ArrayList 集合类,他是大小可变的数组的实现,存储在内的数据称为元素.此类提供一些方法来操作内部存储的元素. Array ...