vue前端优化问题

  • 1. 困扰
  • 2. 解决方案
  • 1. vue-router使用懒加载
  • 2. 去除 .map 文件
  • 3. 压缩音频、图片等静态资源文件,这里以压缩音频为例
  • 4. 可以用gzip压缩


1. 困扰

打包之后文件过大,很影响体验感,部署过后第一次访问网站需要好久的时间。还有一个问题,我发现浏览器加载资源文件时是同步加载的,而且是先加载音频文件再加载js文件,因为我用了一段4MB大小的音频,导致js文件需要好久才能被浏览器加载到,这就导致了网页向后端的请求需要在很久以后才会向后端发出。

2. 解决方案

1. vue-router使用懒加载

这是我的vue-router配置文件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

//获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
//修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
	return originalPush.call(this, location).catch(err => err)
}

export default new VueRouter({
	mode: "history",
	routes: [{
		path: '/home',
		component: resolve => require(['../views/home.vue'], resolve)
	}, {
		path: '/user',
		component: resolve => require(['../views/user.vue'], resolve)
	}, {
		path: '/admin',
		component: resolve => require(['../views/admin.vue'], resolve)
	}]
})

其中
component: resolve => require(['../views/home.vue'], resolve)就是用了懒加载

2. 去除 .map 文件

.map文件时开发者用来调试用的,生产环境没软用
在vue.config.js文件里面写入代码
(如果不存在这个文件就在项目的根目录下创建这个文件)

module.exports = {
	productionSourceMap: false
}

3. 压缩音频、图片等静态资源文件,这里以压缩音频为例

这里介绍一款工具和一个网站

工具:WinMP3Shrink 1.1
一个用于压缩音频的软件,用法超简单,这里就不赘述了。


4. 可以用gzip压缩

这个方法这次没用上,希望下次有机会可以研究研究。
(本来是想用,但是用npm下载的时候报错了,好像是因为版本不兼容,如果有好心人会的话可以教教我吗?)

昨天优化了一个下午,把10MB的打包文件优化到了800KB。我主攻的是后端,前端属于小白,初尝前端感觉挺有意思的。本文讲的内容或许比较粗浅,但都是我一个下午的切身感悟,希望能帮到和我一样刚开始学习前端的同学,更希望大佬看到可以指点一二。