记一次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
投稿猜你喜欢
- random模块用于生成随机数，下面看看模块中一些常用函数的用法：from numpy import randomnumpy.random.
- 前言 大家周末好，今天给大家带来的是Python当中生成器和迭代器的使用。我当初第一次学到迭代器和生成器的时候，并没有太在意，只是觉得这是一
1. 新建.py文件# pip install kafka-pythonfrom kafka import KafkaConsumerimp- 使用groupby([ ]).size()统计的结果，值相同的字段值会不显示如上图所示，第一个空着的行是982499 7 3388 1，因为
- 原始结构：Column1 Column2----------- ----------1 A1 B2 C2 D2 E3 F查询效果：Colum
- 一、项目视图分析通过上图，我们可以看到，一个完整的项目，基本包括三个部分：用户视图层、接口层、数据处理层，其中，用户视图层是用来接收用户的数
- 如何限制上传文件的大小？要限制上传大小，只需如下设置一个属性即可： &
- 0 引言上周被一则新闻震惊到了，《2454万元大奖无人认领！福彩史上第二大弃奖在广东中山产生 》，在2019年5月2日开奖的双色球中，广东中
- 应用目录下apps.pyclass OperationConfig(AppConfig): name = 'operat
- 前言众所周知Python不像JS或者PHP这种弱类型语言里在字符串连接时会自动转换类型，如果直接将字符串和数字拼接会直接报错。如以下的代码：
- Python中滑动平均算法（Moving Average）方案：#!/usr/bin/env python# -*- coding: utf
- 下面列出列表常用的方法操作列表以及小例子：1. Append 在列表末尾添加元素
- 一、什么是数据驱动测试DDT：data drive test准备一组数据，通过写一个测试用例，不同的数据进行迭代。二、csv文件承载数据CS
- MySQL 触发器MySQL 数据库中触发器是一个特殊的存储过程，不同的是执行存储过程要使用 CALL 语句来调用，而触发器的执行不需要使用
- 一、用HTTP头信息 也就是用PHP的HEADER函数。PHP里的HEADER函数的作用就是向浏览器发出由HTTP协议规定的本来应该通过WE
- 前言本文结合一个具体的无向图来对最简单的一种GNN进行推导。本文第一部分是数据介绍，第二部分为推导过程中需要用的变量的定义，第三部分是GNN
- 要处理文本数据，需要比数字类型的数据更多的清理步骤。为了从文本数据中提取有用和信息，通常需要执行几个预处理和过滤步骤。Pandas 库有许多
- 在使用深度学习模型训练的过程中，工具的准备也算是一个良好的开端吧。熟话说完事开头难，磨刀不误砍柴工，先把前期的问题搞通了，能为后期节省不少精
- 1.writelines()直接写入l=["A","B","C","D
- 前言本文主要给大家介绍的关于Python批量压缩png的相关资料，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍：1.需求为什
