记一次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 相关文章推荐
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 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中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
PHP面向对象详解(三)
2015/12/07 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
Angular.js去除页面中显示的空行方法示例
2017/03/30 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python实现随机选择元素功能
2017/09/14 Python
Python callable()函数用法实例分析
2018/03/17 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
用Python中的turtle模块画图两只小羊方法
2019/04/09 Python
关于Python解包知识点总结
2020/05/05 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
两只小狮子教学反思
2014/02/05 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
聚美优品的广告词
2014/03/14 职场文书
开服装店计划书
2014/08/15 职场文书
档案工作汇报材料
2014/08/21 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
推广普通话主题班会
2015/08/17 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
SQL Server连接查询的实用教程
2021/04/07 SQL Server