前言

优化可以减少请求时间，加快页面渲染速度，通过可视化分析工具给我们带来的便捷！如下图：

可以清晰看到每个文件的原始大小、解析大小、压缩后大小，根据视图将过大文件优化，就是我们主要做的事情。

安装

npm install webpack-bundle-analyzer –save-dev

配置

1、webpack配置

在webpack.config.js中配置

BundleAnalyzerPlugin配置请参考官方文档Webpack Bundle Analyzer

// 分析包内容
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = { plugins: [ // 开启 BundleAnalyzerPlugin new BundleAnalyzerPlugin(), ],
};

在package.json中配置

"scripts":{"analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build”
}

启动 npm run analyze，浏览器打开http://127.0.0.1:8888

2、vue-cli3配置

在vue.config.js中对webpack进行配置

module.exports = {chainWebpack(config) {config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)config.plugins.delete('prefetch')}
}

在package.json引入（可省略）

"devDependencies": {"webpack-bundle-analyzer": "^4.4.0"
},

npm run dev 启动后，自动在浏览器打开http://127.0.0.1:8888

Vue优化（一）、webpack-bundle-analyzer可视化分析相关推荐

几种常见的数据可视化分析图表
可视化技术的高速发展带动着数据的进步.数据可视化的数据分析图表,借助于可视化的大屏,将数据以图表的形式进行汇总分析,加快着用户对于数据的接受时间,同时对于整体的布局美观,也是一种合理化的设计.如何设计 ...
vue webpack 访问php,实例详解vue-cli优化的webpack配置
最近的项目度过了开始忙碌的基建期,也慢慢轻松下来,准备记录一下自己最近webpack优化的措施,希望有温故知新的效果.本文主要介绍了详解基于vue-cli优化的webpack配置,小编觉得挺不错的,现 ...
基于 SpringBoot+Vue 的开源数据可视化分析工具
简介 DataEase 是开源的数据可视化分析工具,帮助用户快速分析数据并洞察业务趋势,从而实现业务的改进与优化.DataEase 支持丰富的数据源连接,能够通过拖拉拽方式快速制作图表,并可以方便的与 ...
【Android 内存优化】使用 Memory Analyzer ( MAT ) 工具分析内存 ( MAT 工具使用 | 最大对象 | 类实例个数 | 引用与被引用 | GC Roots 最短链 )
文章目录一. 内存中最大的对象二. 查看每个类的对象实例的个数三. 查看对象的引用与被引用四. 查看对象到 GC Roots 的最短距离 1. 选择 Merge Shortest Paths ...
转：vue-cli的webpack模板项目配置文件分析
转载地址:http://blog.csdn.net/hongchh/article/details/55113751 一.文件结构本文主要分析开发(dev)和构建(build)两个过程涉及到的文件, ...
vue-cli的webpack模板项目配置文件分析
由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修 ...
（六）构建优化(揭开webpack性能优化的内幕)
构建优化 webpack的优化配置[了解这些优化配置才敢说会用webpack] Tree-shaking JS压缩作用域提升 Babel的优化配置 webpack的依赖优化 noParse(不解析) ...
Vue优化策略_项目发布_01
文章目录一.移除console 策略 1. 命令 1.1. 插件官网: 1.2. 安装babel-plugin-transform-remove-console 1.3. 在babel.config ...
vue-cli的webpack模板项目配置文件分析（转）
由于最近在vue-cli生成的webpack模板项目的基础上写一个小东西,开发过程中需要改动到build和config里面一些相关的配置,所以刚好趁此机会将所有配置文件看一遍,理一理思路,也便于以后修 ...

Vue优化（一）、webpack-bundle-analyzer可视化分析

前言

安装

配置

Vue优化（一）、webpack-bundle-analyzer可视化分析相关推荐

最新文章

热门文章