记一次vue-webpack项目优化实践详解
作者:蔺相如如 发布时间:2023-07-02 16:37:22
标签:vue,webpack,优化
项目现状
项目是一个数据监测平台,引入了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
0
投稿
猜你喜欢
- 1.timeit模块timeit模块可以用来测试一小段python代码的执行速度class timeit.Timer(stmt = '
- 假设有如下目录结构:-- dir0| file1.py| file2.py| dir3| file3.py| dir4| file4.pyd
- 前言观前提醒:因为是代码控制统计,所以操作每一个步骤都很重要,否则就会报错。操作步骤1.将在线编辑文档导入本地。为了方便代码处理,将导出的e
- 我们经常会遇到数据库磁盘空间爆满的问题,或由于归档日志突增、或由于数据文件过多、大导致磁盘使用紧俏。这里主要说的场景是磁盘空间本身很大,但表
- 01 ReplicaSet的架构 前面的文章中,我们说了ReplicaSet的基本概念和限制以及部署前的基本知识。
- 1. 写在前面今天整理OpenCV入门的第三个实战小项目,前面的两篇文章整理了信用卡数字识别以及文档OCR扫描, 大部分用到的是OpenCV
- # -*- coding: utf-8 -*- import numpy as npimport matplotlib.pyplot as
- sql="select * from admin where users='"&users&&q
- 1.写作背景Tensorflow官方在2018年宣布,正式发布支持树莓派版本的Tensorflow,编者开始直接用:pip install
- 1、为什么淘宝的手机频道页面,竟然会有笔记本、数码相机、随身听,甚至是游戏之类的栏目,而且还有一个“数码·生活”栏目是包括以上这些设备的综合
- 原文:https://dev.mysql.com/doc/refman/8.0/en/group-replication-monitorin
- beego中各类数据库连接方式beego 框架是优秀得go REST API开发框架。下面针对beego中各类数据库连接操作做一个总结。or
- 以前在windows下一直用的idel带的功能调试python程序,在linux下没调试过。(很多时候只是print)就从网上查找一下~方法
- 本文实例讲述了Python编程生成随机用户名及密码的方法。分享给大家供大家参考,具体如下:方案一:import randomglobal u
- login.html <script language = "javascript" type = "t
- 前言🥂上一篇文章说完MySQL的事务和锁了,这次来详细介绍一下在MySQL中一条更新语句的详细执行流程 (本文无特殊说明均是采用Innodb
- 直接在线安装1、File->Settings->Plugins->Install JetBrains Plugins2、点
- 本文实例讲述了Python图像处理之颜色的定义与使用。分享给大家供大家参考,具体如下:python中的颜色相关的定义在matplotlib模
- 由于工作需要本文主结合了excel表格,对表格中的ssh密码进行批量修改以下是详细代码(python3):'''遇到
- Flappy Bird是前段时间(好像一年or两年前....)特别火的有一个小游戏,相信大家都玩过。Flappy Bird操作简单,通过点击