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特别大,所有引用的第三方库都会打到这个包里面;另外就是之 ...
随机推荐
- Spark Streaming 快速入门
一.简介 1.便于使用 Spark Streaming将Apache Spark的 语言集成API 引入流处理,使您可以像编写批处理作业一样编写流式作业.它支持Java,Scala和Python. 2 ...
- [20190417]隐含参数_SPIN_COUNT.txt
[20190417]隐含参数_SPIN_COUNT.txt--//在探究latch spin计数之前,先简单探究_SPIN_COUNT.实际上oracle现在版本latch spin的数量不再是200 ...
- JavaScript(四)变量
变量的声明 在JavaScript程序中,使用一个变量之前应当使用关键字var进行声明,如下所示:var num;var sum; 也可以写成var num,sum,avg;如果只是声明变量而没有给变 ...
- 我的Windows日常——Win7完美兼容tsmmc.msc的方法
操作步骤 32位操作系统: 1.将2003系统C:\WINDOWS\system32目录下的mstsmhst.dll.mstsmmc.dll.tsmmc.msc拷贝到Windows7系统中的C:\WI ...
- Win7/Win8.1升级Win10后屏幕一直闪烁怎么办?
有些用户在把Win7/Win8.1升级到Win10正式版后,发现屏幕一直不停闪烁,以至于无法正常使用.出现这种情况的原因可能有很多,微软社区的论坛审阅人Alex_Shen给出了一种解决方案:进入安全模 ...
- ssrfme 复现
这道题搞了我很长时间,主要太菜了,开始复现吧 <?php $sandbox = "sandbox/" . md5("orange" . $_SER ...
- js一些梳理
浏览器组成 1.Shell部分2.内核内核的组成 1.渲染引擎 负责页面显示 2.JS引擎 3. 其他模块主流内核介绍 >> * Trident(IE内核) >> * Geck ...
- (light oj 1319) Monkey Tradition 中国剩余定理(CRT)
题目链接:http://lightoj.com/volume_showproblem.php?problem=1319 In 'MonkeyLand', there is a traditional ...
- C#,WPF中使用多文本显示数据,并对其数据进行关键字高亮等操作
需求:针对多文本信息显示,我们需要对其内容中的某些关键字或者某行进行高亮显示,并用不同颜色显示. 分析:在C#中,首先要进行多文本信息显示,可以RichTextBox(不要使用TextBox)控件,该 ...
- MongoDB系列:四、spring整合mongodb,带用户验证
在前面的两篇博客 MongoDB常用操作练习.springboot整合mongoDB的简单demo中,我们基本上熟悉了mongodb,也把它与spring boot进行了整合并且简单使用.在本篇博客中 ...