记一次vue-webpack项目优化实践详解
作者:蔺相如如 时间:2023-07-02 16:37:22
项目现状
项目是一个数据监测平台,引入了ehcart和three.js 负责项目的数据可视化;打包后,体积高达2.1M,这个体积相比于我的项目规模来说就显得稍有笨重了
使用webpack-bundle-analyzer分析了一下各个文件所占用的比例:
整个项目文件分布大体清晰了,现在开始优化走起!
优化思路
根据 wba的显示,第三方插件是大部头,包括three.js echart组件
和elementUI组件
。
three.js优化空间不大,主要关注另外两个上面。
echarts
根据我的项目需求,echart
主要用到的是linechart
,其他图表不需要。而在开发过程中,我把整个echart都引用进来,其实是很没有必要的。
ehcart整体引用方式
import echarts from ("echarts")
vue.prototype.$echarts = echarts
更改为:
import echarts from "echarts/lib/echarts.js"
import "echarts/lib/chart/line"
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/legendScroll'
import "echarts/lib/component/dataZoom"
Vue.prototype.$echarts = echarts
elementUI
同理echart,elementUI同样按需求导入,替换之前的整体引入。
elementUI按需引入需要安装 babel-plugin-component包,在babelrc文件中进行如下修改:
"plugins": [
...
["component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}]
]
优化后:
经过对第三方插件的优化,打包后的文件缩小了近30%。
目前为止,项目打包后的大部头就是three.js
,这个目前的优化空间较小。
而对echart改造给打包体积上带来的收益还是很明显的。
后记
这次的优化比较简单,主要是通过对自己项目的优化,熟悉webpack-bundle-analyzer的操作和使用这个插件的来优化webpack打包文件的方法和思路;算是简单的练手记录一下吧。当然,从整体优化的大维度上来说优化的点还有很多,这个文章继续更新下去。
来源:https://segmentfault.com/a/1190000018168498
标签:vue,webpack,优化
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python简单的GUI程序示例详解
2021-04-10 20:17:16
![](https://img.aspxhome.com/file/2023/0/93590_0s.png)
MySQL 中这么多索引该怎么选择
2024-01-17 12:58:54
ASP中如何判断字符串中是否包数字
2008-07-21 12:04:00
编辑BLOG文章的一些好习惯
2007-11-15 06:35:00
能说明你的Javascript技术很烂的五个原因分析
2024-04-29 14:07:36
Python实现的读写json文件功能示例
2023-11-29 21:42:41
HTML5的革新:结构之美
2011-04-16 10:57:00
Virtualenv 搭建 Py项目运行环境的教程详解
2023-02-22 04:56:33
![](https://img.aspxhome.com/file/2023/5/62625_0s.gif)
python opencv实现目标区域裁剪功能
2022-07-15 19:17:56
![](https://img.aspxhome.com/file/2023/4/78524_0s.jpg)
Vue双向绑定原理及实现方法
2024-05-10 14:16:55
pycharm 批量修改变量名称的方法
2021-09-07 22:48:29
![](https://img.aspxhome.com/file/2023/9/75169_0s.jpg)
Python 图片转数组,二进制互转操作
2023-10-07 17:46:04
![](https://img.aspxhome.com/file/2023/4/89064_0s.png)
Python端口扫描简单程序
2022-12-26 02:19:45
php生成shtml类用法实例
2023-11-15 21:46:23
一个mysql死锁场景实例分析
2024-01-16 21:59:47
![](https://img.aspxhome.com/file/2023/5/71795_0s.jpg)
Django celery异步任务实现代码示例
2021-12-10 21:38:40
![](https://img.aspxhome.com/file/2023/1/135231_0s.png)
MYSQL启用日志和查看日志
2010-12-03 16:24:00
PHP实现逐行删除文件右侧空格的方法 <font color=red>原创</font>
2023-11-22 05:11:25
详解如何利用tushare、pycharm和excel三者结合进行股票分析
2021-12-11 04:04:47
![](https://img.aspxhome.com/file/2023/6/99156_0s.jpg)
Go并发编程之sync.Once使用实例详解
2024-04-26 17:21:23