记一次vue-webpack项目优化实践详解


Posted in Javascript onFebruary 17, 2019

项目现状

项目是一个数据监测平台,引入了ehcart和three.js 负责项目的数据可视化;打包后,体积高达2.1M,这个体积相比于我的项目规模来说就显得稍有笨重了

使用webpack-bundle-analyzer分析了一下各个文件所占用的比例:

记一次vue-webpack项目优化实践详解

整个项目文件分布大体清晰了,现在开始优化走起!

优化思路

根据 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

记一次vue-webpack项目优化实践详解

记一次vue-webpack项目优化实践详解

elementUI

同理echart,elementUI同样按需求导入,替换之前的整体引入。
elementUI按需引入需要安装 babel-plugin-component包,在babelrc文件中进行如下修改:

"plugins": [
    ...
    ["component",
    {
     "libraryName": "element-ui",
     "styleLibraryName": "theme-chalk"
    }]
   ]

优化后:

记一次vue-webpack项目优化实践详解

经过对第三方插件的优化,打包后的文件缩小了近30%。

记一次vue-webpack项目优化实践详解

目前为止,项目打包后的大部头就是three.js,这个目前的优化空间较小。
而对echart改造给打包体积上带来的收益还是很明显的。

后记

这次的优化比较简单,主要是通过对自己项目的优化,熟悉webpack-bundle-analyzer的操作和使用这个插件的来优化webpack打包文件的方法和思路;算是简单的练手记录一下吧。当然,从整体优化的大维度上来说优化的点还有很多,这个文章继续更新下去。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
Javascript学习笔记4 Eval函数
Jan 11 Javascript
javascript延时加载之defer测试
Dec 28 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
理解JS绑定事件
Jan 19 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
Vue.use源码学习小结
Jun 20 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
原生js实现随机点名功能
Nov 05 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 #Javascript
详解javascript replace高级用法
Feb 17 #Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 #Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 #Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 #Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 #Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 #Javascript
You might like
一段防盗连的PHP代码
2006/12/06 PHP
php中使用url传递数组的方法
2015/02/11 PHP
Java中final关键字详解
2015/08/10 PHP
PHP执行系统命令函数实例讲解
2021/03/03 PHP
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
如何用angularjs制作一个完整的表格
2016/01/21 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
使用Python生成XML的方法实例
2017/03/21 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
python循环输出三角形图案的例子
2019/11/22 Python
python多进程并发demo实例解析
2019/12/13 Python
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
亲戚结婚的请假条
2014/02/11 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
农村面貌改造提升实施方案
2014/03/18 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
学习雷锋倡议书
2014/04/15 职场文书
销售员岗位职责
2014/06/09 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
加强作风建设工作总结
2014/10/23 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
详解Nginx 工作原理
2021/03/31 Servers
MySQL分区路径子分区再分区
2022/04/13 MySQL