vue中resolve函数

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。我主攻的是后端，前端属于小白，初尝前端感觉挺有意思的。本文讲的内容或许比较粗浅，但都是我一个下午的切身感悟，希望能帮到和我一样刚开始学习前端的同学，更希望大佬看到可以指点一二。