Vue打包优化之分析工具webpack-bundle-analyzer
// 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的更多相关文章
- vue 打包优化
vue 打包优化 路由按需加载 通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后 ...
- 【转】Eclipse MAT内存分析工具(Memory Analyzer Tool)
Eclipse MAT内存分析工具(Memory Analyzer Tool) MAT内存分析工具# MAT是Memory Analyzer的简称,它是一款功能强大的Java堆内存分析器.可以用于查找 ...
- 内存分析工具-MAT(Memory Analyzer Tool)
内存分析工具-MAT(Memory Analyzer Tool) 首先查看如下代码,main函数中有一个成员变量map,map里被循环放入对象Hanson,hanson持有姓名和age还有friend ...
- webpack & bundle analyzer
webpack & bundle analyzer webpack bundle analyzer https://github.com/th0r/webpack-bundle-analyze ...
- Eclipse MAT内存分析工具(Memory Analyzer Tool)
MAT内存分析工具 MAT是Memory Analyzer的简称,它是一款功能强大的Java堆内存分析器.可以用于查找内存泄露以及查看内存消耗情况.MAT是基于Eclipse开发的,是一款免费的性能分 ...
- Android 内存分析工具 MAT(Memory Analyzer Tool)
如果使用DDMS确实发现了我们的程序中存在内存泄漏,那又如何定位到具体出现问题的代码片段,最终找到问题所在呢?如果从头到尾的分析代码逻辑,那肯定 会把人逼疯,特别是在维护别人写的代码的时候.这里介绍一 ...
- 内存映像分析工具Eclipse Memory Analyzer
1. Eclipse Memory Analyzer安装 Help ->Eclipse Marketplace,搜索Memory,点击install,->confirm->同意证书内 ...
- vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画
当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的 异步 ...
- vue打包优化
网站首页第一次加载很慢,优化过后从十多二十秒缩短到了几秒,主要是打包的时候按需加载了,然后使用了gzip压缩. 这是优化之前的 发现vendor特别大,所有引用的第三方库都会打到这个包里面;另外就是之 ...
随机推荐
- sqlsever存储过程配合代理作业自动定时建表
1.自动建表存储过程 USE [ThreeToOne] GO /****** Object: StoredProcedure [dbo].[WTO_CreateTable_ScanDoXXX] ...
- Java基础系列--03_Java中的方法描述
方法 (1)方法的定义:就是完成特定功能的代码块. 注意:在很多语言里面有函数的定义,而在Java中,函数被称为方法. (2)格式: 修饰符 返回值类型 方法名(参数类型 参数名1,参数类型 参数名2 ...
- redis编译 报告错误 jemalloc/jemalloc.h:没有那个文件或目录 解决.
问题原因:没找到jemalloc头文件. 百度谷歌半天没找到有效的下载地址. github中有 到github下载.jemalloc https://github.com/jemalloc/jemal ...
- 【题解】P2922 [USACO08DEC]秘密消息Secret Message
\(\text{Tags}\) 字典树,统计 题意: 给出两组\(\text{0/1}\)串\(\text{A,B}\),求解\(\text{A}\)中某串是\(\text{B}\)中某串的前缀,和\ ...
- [解读REST] 3.基于网络应用的架构
链接上文[解读REST] 2.REST用来干什么的?,上文中解释到什么是架构风格和应该以怎样的视角来理解REST(Web的架构风格).本篇来介绍一组自洽的术语,用它来描述和解释软件架构:以及列举下对于 ...
- python open 函数的读写追加
- 如何把Office365的更新从半年通道改成月度通道
转自msdn,转发链接:www.cnblogs.com/Charltsing/p/Office365month.html 作者QQ: 564955427 建立一个Bat文件,写入 下面内容 setlo ...
- url全部信息打印
public String findAllContract(HttpServletRequest request,String a){ String string = new StringBuilde ...
- JAVA基础知识回顾(面试资料)
关于数据库知识和面试:https://www.cnblogs.com/yanqb/p/9894943.html 关于数据库知识和面试:https://www.cnblogs.com/yanqb/p/1 ...
- css的寬高約束
https://blog.csdn.net/qq_26780317/article/details/80736514