记一次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打包文件的方法和思路;算是简单的练手记录一下吧。当然,从整体优化的大维度上来说优化的点还有很多,这个文章继续更新下去。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
浅谈vue项目优化之页面的按需加载(vue+webpack)
通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了.这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来.结合Vue的异步组件和webpackde code splitting feature,轻松实现路由组件的懒加载. 就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这
-
详解vue项目优化之按需加载组件-使用webpack require.ensure
使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js 路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province from '@/components/Province' import Segm
-
详解vue-cli之webpack3构建全面提速优化
前言 伴随着vue的全球化,已经各种vue的组件框架越来越完善,从早期的element-ui到vux,iview等越来越多高质量的项目,使用vue进行前端构建已然是一件工程化,模块化,敏捷化的事情 在这其中,相信很多人都会选择官方的vue-cli初始化工程模板,然后通过引入第三方组件框架和工具的方式进行开发构建,我个人也十分推崇这种做法.但是vue-cli初始化的项目模板毕竟是面向所有开发者的,在兼容性方面会有一定妥协.相信很多人都已经搜索过各类的webpack构建优化文章,但是很多不是版本太老
-
vue-cli webpack2项目打包优化分享
减小文件搜索范围 配置 resolve.modules Webpack的resolve.modules配置模块库(即 node_modules)所在的位置,在 js 里出现 import 'vue' 这样不是相对.也不是绝对路径的写法时,会去 node_modules 目录下找.但是默认的配置,会采用向上递归搜索的方式去寻找,但通常项目目录里只有一个node_modules,且是在项目根目录,为了减少搜索范围,可以直接写明 node_modules 的全路径:同样,对于别名(`alias)的配置
-
vue webpack打包优化操作技巧
临近春节,公司很多同事都提前回家过年,剩余人员根据禅道去修改bug,当bug修正完毕以后,我们需要重新打包给运维,上测试服给测试同事提测,但是由于项目本体比较庞大,所以打包时间太过漫长(二十五分钟以上:sob:),所以有了打包优化的想法(其实想法早就有了,但是因为平时工作计划比较充实,所以一直没有去完成这个工作),这次正好有时间,所以去重新考虑了这个问题! webpack是react项目标配的打包工具,和NPM搭配起来使用管理模块实在非常方便. webapck 把所有的静态资源都看做是一个
-
详解vue-cli + webpack 多页面实例配置优化方法
本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家 vue+webpack是否有多页面 目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈. 在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的. 那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,
-
详解基于vue-cli优化的webpack配置
最近的项目度过了开始忙碌的基建期,也慢慢轻松下来,准备记录一下自己最近webpack优化的措施,希望有温故知新的效果. 项目采用的是vue全家桶,构建配置都是基于vue-cli去改进的.关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释,有助于更好的理解webpack. 仔细总结了一下,自己的优化基本还是网上流传的那几点 通过 externals 配置来提取常用库,引用cdn 合理配置CommonsChunkPl
-
记一次vue-webpack项目优化实践详解
项目现状 项目是一个数据监测平台,引入了ehcart和three.js 负责项目的数据可视化:打包后,体积高达2.1M,这个体积相比于我的项目规模来说就显得稍有笨重了 使用webpack-bundle-analyzer分析了一下各个文件所占用的比例: 整个项目文件分布大体清晰了,现在开始优化走起! 优化思路 根据 wba的显示,第三方插件是大部头,包括three.js echart组件和elementUI组件. three.js优化空间不大,主要关注另外两个上面. echarts 根据我的项目需
-
vue脚手架项目创建步骤详解
vue脚手架 -> vue.cli 快速的创建一个大型的功能齐全的vue项目模板(初始化项目) 土味解释:快速的创建一个空的vue项目 安装(全局安装) 全局安装 > npm i @vue/cli -g 创建vue脚手架项目 > vue create 项目名 配置选项 Vue CLI v4.5.11 ? Please pick a preset: (Use arrow keys) > Default ([Vue 2] babel, eslint) Default (Vue 3 Pr
-
Vue项目优化打包详解
目录 前言 一.路由懒加载 1.为什么需要路由懒加载 2.如何实现路由懒加载 3.路由懒加载中的魔法注释 二.分析包大小 1.需求 2.如何生成打包分析文件 三.webpack配置排除打包 1.需求 2.排除打包 四. 引用网络资源 1.需求 2.CDN 3. 实现步骤 五. 打包去除console.log 1.需求 2.代码演示 总结 前言 Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项.跟随本文的脚步来看看如何对项目进行优化吧~ 一.路由懒加载
-
express 项目分层实践详解
前言 上次我们搭建了一个基本的 express 后台,但是这样的项目结构的可扩展性,维护性和代码复用性都不是很好,参照之前学习 JavaWeb 时候的四层架构设计,用分层的思想来对 express 进行一点小优化,进一步提高代码的可拓展性.本文的源代码在 Github上,建议看着代码来看这篇文章. 1 四(五)层结构概念 这个就简单说一下,所谓四层架构就是 Model实体层,Dao层(数据访问层也就是从数据库中查数据),Service层(业务逻辑层,也就是处理好数据),Controller层(视
-
Vue+webpack项目基础配置教程
最近在学习webpack,跟着课程一个单页面应用,在这里记录一下.这个部分主要讲了如何配置webpack的环境,以及webpack dev的配置. 记录比较粗略,后续会更新. 1.开发环境:vscode,node.js,vue.js,webpack 大家自己安装一下node.js可以参考菜鸟教程 使用的IDE是 VScode 2.项目初始化 快捷键ctrl+` 打开vscode控制台 vscode界面 2.1安装webpack vue vue-loader npm init npm i webp
-
Vue webpack 项目自动打包压缩成zip文件的方法
这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能就要打包好多次,这就很烦了.所以索性在执行 npm run build 命令时就直接打包成zip文件,方便省事! 1.插件装备 webpack插件:filemanager-webpack-plugin,该插件可执行打包,复制,移动,删除文件以及新文件夹在build之前及之后创建. 安装: npm i
-
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
vue +webpack 项目中数据更新后页面没有刷新问题,ie11下,如果GET请求请求相同的URL,默认会使用之前请求来的缓存数据,而不会去请求接口获取最新数据,我用的解决方法是在每个请求发送前,拦截请求并给请求接口的URL后加一个时间戳(new Date().getTime()),这样就保证了每一次请求的URL都不同,ie11就会不断的请求接口而不使用缓存数据. 代码如下 if(config.url.indexOf('?')>-1){ config.url = url + config.u
-
Vue+webpack项目配置便于维护的目录结构教程详解
新建项目的时候创建合理的目录结构便于后期的维护是很重要 环境:vue.webpack 目录结构: 项目子目录结构 子目录结构都差不多,主要目录是在src下面操作 src目录结构 src/common 目录 主要用来存放公共的文件 src/components 主要用来存放公共的组件 src/config 用来存放配置文件,文件目录如下 src/config/index.js 配置目录入口文件 import api from './website' // 当前平台 export const HOS
-
解决vue+webpack项目接口跨域出现的问题
1.config文件夹下index.js文件设置proxyTable(proxyTable后面的host可以设置也可以保持默认的localhost) proxyTable: { '/api': { target: 'http://10.xx.xx.xx:8080/renter-server', // 开发环境 // target: 'http://10.xx.xx.xx:8080/renter-server', // 生产环境接口 changeOrigin: true, pathRewrite:
-
Vue.js 图标选择组件实践详解
本文介绍了Vue.js 图标选择组件实践详解,分享给大家,具体如下: 背景 最近项目中在做一个自定义菜单需求,其中有一个为菜单设置小图标的功能,就是大家常见的左侧菜单 设置图标不难,方案就是字体图标,可供使用的图标库也有很多,比如阿里巴巴的 Iconfont,以及 Fontaswsome 等,问题在于如何优雅的提供几百个图标供用户选择,而不需要开发去一个一个的写标签,也不需要一个个的去找图标. 字体图标库 Fontawesome 方案 我们使用字体图标的方式,一般是一个 <i class="
随机推荐
- Nginx 防止被域名恶意解析的办法
- System.Data.SQLite 数据库详细介绍
- 阿里云linux服务器安全设置(防火墙策略等)
- Android实现手势滑动多点触摸缩放平移图片效果
- 详解Swift编程中的方法与属性的概念
- 浅谈bootstrap源码分析之scrollspy(滚动侦听)
- 在Iframe中获取父窗口中表单的值(示例代码)
- Python采集腾讯新闻实例
- linux下使用RPM安装mysql5.7.17
- 详解javascript new的运行机制
- Javascript实现网络监测的方法
- 简单测试Apache是如何完成负载均衡策略配置
- 基于PHP编程注意事项的小结
- jQuery插件PageSlide实现左右侧栏导航菜单
- jquery获取select选中值的方法分析
- 没有ISAPI Rewrite FULL照样玩多站点伪静态
- Android中Activity跳转的创建步骤总结
- 详解Android Dialog对话框的五种形式
- 布线铜线和光纤如何连接传输数据
- 基于axios 解决跨域cookie丢失的问题