本文重点介绍Vue单页面应用的优化手段:

  • 异步加载
  • 面切换时加loading特效
  • 点击延迟
  • inline manifest
  • 逻辑代码优化
  • 依赖包体积优化
  • cdn引用

Vue代码优化

异步加载

所谓的异步加载组件,其实就是组件懒加载。可以理解为:当我需要使用组件的时候才进行加载。主要包含两部分:路由配置和子组件的调用。
所以在router文件夹下 index.js 做如下配置

组件优化

由于是后台项目,所以选择element-ui框架进行后台系统搭建,所以对这个进行优化也可以减小体积,提高速度和减少加载时间,提高用户体验。

全局使用
全局引入和使用
import elementUI from 'element-ui'
Vue.use(elementUI)
这种方法对于只用少量element-ui组件的情况来说,很多组件都是多余的,会无形中加大加载时间和项目打包后的体积,所以使用下面这种按需引入的方法可以有效解决这个问题。

按需引入

// 按需引入

import {
Form,
Button,
Table,
} from 'element-ui' // 按需使用
Vue.use(Form)
Vue.use(Button)
Vue.use(Table)
复制代码
还要一些加载和消息提示等的组件,以下写法: // 按需引入
import {
Loading,
Message,
MessageBox,
Notification,
} from 'element-ui' // 按需使用
Vue.use(Loading.directive)
// 挂载到vue实例上面
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification,
使用通知组件可以,这么调用也可以,Notification(options),或者Notification.success(options)。

  

页面切换时加loading特效

页面的响应、渲染速度的影响原因多种多样。为了解决用户在首次进入应用或者页面切换的时等待的白屏时间较长时,可以使用vue-router提供的beforeEach()和afterEach()方法。所以使用loading进度条是一种比较明智的做法。使用nprogress。API可参考官方文档,使用方法如下(假设已经安装好了nprogress):

在router.js中使用import引入nprogress以及它的样式表,配置ngprocess。并在路由配置完成后,调用beforeEach() 和 afterEach方法

//路由配置前
NProgress.configure({ showSpinner: false }) //此处为路由配置列表,可参考上面的异步加载方式进行编写
//路由配置后
router.beforeEach(function (to, from, next) {
NProgress.start() //开始loading
const toIndex = history.getItem(to.path)
const fromIndex = history.getItem(from.path) if (toIndex) {
if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10) || (toIndex === '0' && fromIndex === '0')) {
store.commit('UPDATE_DIRECTION', {direction: 'forward'})
} else {
// 判断是否是ios左滑返回
if (!isPush && (Date.now() - endTime) < 377) {
store.commit('UPDATE_DIRECTION', {direction: ''})
} else {
store.commit('UPDATE_DIRECTION', { direction: 'reverse' })
}
}
} else {
++historyCount
history.setItem('count', historyCount)
to.path !== '/' && history.setItem(to.path, historyCount)
store.commit('UPDATE_DIRECTION', {direction: 'forward'})
} if (/\/http/.test(to.path)) {
let url = to.path.split('http')[1]
window.location.href = `http${url}`
} else {
next()
}
}) router.afterEach(function (to) {
NProgress.done() //loading结束
})

  

点击延迟

安装fastclick后,在main.js中引入即可:

import FastClick from 'fastclick'
FastClick.attach(document.body)

inline manifest

manifest文件时路径配置和异步组件名字列表,这么做可以减少一个http请求。具体做法为,先在入口页面index.html中的head的最后一行加入代码

<%=htmlWebpackPlugin.files.webpackManifest%>

最后在webpack的公共配置文件(我的是webpack.base.conf.js)的vux-loader配置的 plugins 列表中加入inline-manifest插件:

module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['inline-manifest', 'vux-ui', 'progress-bar', 'duplicate-style']
})

逻辑代码优化

这部分的建议就是:①每个vue文件尽可能小(多使用组件,加强可复用性);②vue指令中的v-show和v-if的使用:v-if耗性能更多,所以频繁切换的使用 v-show,不频繁切换的使用 v-if;③vue指令中的v-for搭配:key使用,确保唯一性;④样式表css务必加scoped以防止干扰————————————————

webpack配置优化

依赖包体积优化

众所周知,日常开发过程中,前端这块早就已经开始进行工程化和组件化开发了,所以免不了下载各种node包,使得打包后的体积也是非常的庞大,下面使用webpack的一个配置外部扩展就可以解决这类问题。

Gzip压缩和sourceMap优化

这个也是压缩文件的一个方法,线上服务器的nginx也开启gzip功能更好;取消资源地图,可以有效保护源码。

在webpack的build文件中,开启Gzip压缩功能和禁用资源地图。

module.exports = {
// ...
build: {
productionSourceMap: false,
productionGzip: true,
}
}

这样做的话,打包以后就不会再有sourceMap文件了,也会多了几个以.js.gz后缀名的文件

cdn引用

方法为:在webpack的公共配置文件(一般为webpack.base.conf.js)的resolve下有extensions选项。数组中加入不需要打包的组件,并且在入口的html中使用cdn的方式引入即可,此时会发现打包出来的vender包会变小很多.

具体步骤

以 vue, vue-router,element-ui为例

步骤1 index.html cdn引入框架

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo-vue-project</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.0.8/theme-chalk/index.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script>
</body>
</html>

  

步骤2 修改 build/webpack.base.conf.js

module.exports = {
...
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT'
},
...
}

  

步骤3 修改框架注册方式
修改 src/router/index.js

// import Vue from 'vue'
import VueRouter from 'vue-router'
// 注释掉
// Vue.use(VueRouter)
...

  

修改 src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import ELEMENT from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css' Vue.config.productionTip = false Vue.use(ELEMENT)
Vue.prototype.$http = axios /* eslint-disable no-new */
new Vue({
el: '#app',
store,
template: '<App/>',
components: { App }
})

  

总结

至此 vue-cli2.0中的打包配置,也有一些了解了。个人吐槽下webpack是真的复杂。观望和期待 vue-cli3.0+webpack4.0能来带不一样的体验。

Vue+Webpack之 代码及打包优化的更多相关文章

  1. Vue -- vue-cli(vue脚手架) npm run build打包优化

    这段时间公司新项目立项,开发组选用 Vue2.0 进行开发.当然也就一并用到 vue cli 进行自动化构建.结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题 ...

  2. Vue + Webpack 根据不同环境打包

    修改 prod.env.js // 当前正在运行的脚本名称 const TARGET = process.env.npm_lifecycle_event // 第一个参数 let argv = pro ...

  3. 记一次webpack打包优化

    未进行打包优化的痛点: 随着项目的不断扩大,引入的第三方库会越来越多,我们每次build的时候会对所有的文件进行打包,耗时必定很长,不利于日常开发. 解决思路: 第三方库我们只是引入到项目里来,一般不 ...

  4. 从0开始搭建vue+webpack脚手架(三)

    在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...

  5. Vue发布过程中遇到坑,以及webpack打包优化

    前言 这段时间,本人自己做了一个vue画面部署到自己的服务器上,发现运行速度慢的的惊人,虽然服务器很渣(本人没什么钱,只能租最差的服务器,主要是给自己学习用的),但是这样开发出来的网站简直不能用,所以 ...

  6. vue+webpack+element-ui项目打包优化速度与app.js、vendor.js打包后文件过大

    从开通博客到现在也没写什么东西,最近几天一直在研究vue+webpack+element-ui项目打包速度优化,想把这几天的成果记录下来,可能对前端牛人来说我这技术比较菜,但还是希望给有需要的朋友提供 ...

  7. webpack原理探究 &amp;&amp; 打包优化

    在做vue项目和react项目时,都用到了webpack.webpack帮助我们很好地提高了工作效率,但是一直以来没有对其原理进行探究,略有遗憾. 因为使用一个工具,能够深入了解其原理才能更好地使用. ...

  8. 从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(一)

    摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...

  9. 【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)

    摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...

随机推荐

  1. jboss4.2.3建立oracle JMS应用

    一.基本配置 1 增加oracle驱动文件,ojdbc6.jar,不能使用小于该版本的jdbc驱动,jboss-4.2.3.GA\server\default\lib 2 增加retrotransla ...

  2. hdu 4856 Tunnels (bfs + 状压dp)

    题目链接 The input contains mutiple testcases. Please process till EOF.For each testcase, the first line ...

  3. gulp安装和使用简介

    一. gulp和grunt对比 grunt目前的工作流程:读文件.修改文件.写文件——读文件.修改文件.写文件——... gulp目前的工作流程:读取文件——修改文件——修改文件...——写文件 二. ...

  4. mybatis+spring+struts2框架整合

     近期公司要开发新的项目,要用struts2+mybatis+spring框架,所以学习了下,来自己的博客发表下,希望能给大家带来帮助!下边我把我的myschool开发的源代码以及数据库贴出来!  开 ...

  5. 斜率DP题目

    uva 12524 题意:沿河有n个点,每个点有w的东西,有一艘船从起点出发,沿途可以装运东西和卸载东西,船的容量无限,每次把wi的东西从x运到y的花费为(y-x)*wi; 问把n个点的东西合并成k个 ...

  6. ios framework 开发实战 之 参考

    WWDC2014之iOS使用动态库 iOS开发——创建你自己的Framework 使用CocoaPods开发并打包静态库 iOS Framework 和CocoaPods TDD的iOS开发初步以及K ...

  7. 用Python写一款属于自己的 简易zip压缩软件 附完成图(适合初学者)

    一.软件描述 用Python tkinter模块写一款属于自己的压缩软件.zip文件格式是通用的文档压缩标准,在ziplib模块中,使用ZipFile来操作zip文件,具有功能:zip压缩功能,zip ...

  8. Github搭建属于自己的开源项目-androd学习之旅(72)

    Github是一个基于的git的版本控制工具,分为私人代码管理和开源代码管理,下面我们简单的介绍一下 首先登陆官网https://github.com 完成注册,随后首页会有四个模块,第一个是安装的指 ...

  9. Android Studio 使用SlidingMenu侧滑菜单

    SlidingMenu是十分常用的开源框架,提供了一个滑动侧边栏的功能. 看了许多教程,都是往eclipse导入SlidingMenu库的,随后百度了几篇Android Studio导入的教程,鼓捣了 ...

  10. Mui Webview下来刷新上拉加载实现

    有些事情经历过之后才会发现,原来再次之前我是如此的啥,因为是第一次做,毫无头绪,有时会想假如有个一demo就好了,那么就不会花费这么多的无用功了.今天使用mui 的webview实现了一个H5页面的上 ...