// 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. 我带着小程序和Springboot后端终于战胜了WebSocket!!!胜利( •̀ ω •́ )y

    WebSocket项目笔记 1. What is WebSocket? (以下内容来源于百度百科) WebSocket是一种在单个TCP连接上进行全双工通信的协议 WebSocket使得客户端和服务器 ...

  2. nginx笔记----解决windows80端口被iis占用

    打开注册表:regedit HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\HTTP 数值数据修改成0或者其他 然后重启

  3. [20190416]process allocation latch.txt

    [20190416]process allocation latch.txt --//看链接:http://andreynikolaev.wordpress.com/2010/12/16/hidden ...

  4. 一条命令解决: sql server 2008 安装提示重启计算机

    0.将安装的iso文件解压 1. 使用管理员账户打开 cmd命令行 2.将命令行的路径切换到解压路径下,你应该可以看到setup.exe 3.执行命令  一条命令解决:setup.exe /SkipR ...

  5. 一个ELK日志检索实施案例

    figure:first-child { margin-top: -20px; } #write ol, #write ul { position: relative; } img { max-wid ...

  6. SIM 800C指令笔记

    拨号ATD137xxxxxxxx; 挂断-对方挂断收到NO CARRIER消息 挂断-主动挂断ATH 接电话ATA 打入电话消息RING 设置来电电话号码显示AT+CLIP=1显示消息格式:+CLIP ...

  7. MySQL二进预编译制安装

    +++++++++++++++++++++++++++++++++++++++++++标题:MySQL二进预编译制安装时间:2019年2月25日内容:MySQL二进制预编译安装重点:MySQL二进制预 ...

  8. CentOS配置svn

    参考: https://www.cnblogs.com/taohaijun/p/7172939.html 1.检查已安装版本  rpm -qa subversion 卸载旧版本SVN yum remo ...

  9. mybatis将传入的Integer类型的0被识别成空字符串的问题

    更改mapper文件的sql如下: <if test="interger != null"> interger= #{interger} </if> 原因: ...

  10. C#进行回文检测,判断字符串是否是回文的代码

    下面代码内容是关于C#进行回文检测,判断字符串是否是回文的代码,应该是对各位朋友有些好处. Console.WriteLine("算法1:请输入一个字符串!");string st ...