在低并发情况下,制约网页速度的往往是前端工程。加载慢一是因为网络慢,这个我们不考虑,另一个是文件过大。那么我们就要想办法压缩文件。
1、打包文件中的app.js文件放入cdn,加快页面首次加载速度
2、提取公共方法,减少js代码量
3、 提取公共组件,将统计分析的售前和售后,客户分配,客户管理,客服管理等页面的搜索条件模块化,减少了html代码量,减少了每个页面中都有的重复方法。
4、vue-router路由全部改成懒加载路由,该页面被点开时才加载该页面.vue组件,提高首页加载速度。
5、 根据页面复杂度,删除部分页面生命周期created中的window.setTimeout方法
6、将所以v-show替换成v-if,v-if如果不为真就不会加载这段代码,而v-show还是会加载这些代码,这样加快了页面加载速度。
7、 检查所有页面,删除页面中没有用到的css和data数据以及js方法,减少文件体积。
8、 使用webpack插件,将常用不需要重复打包的依赖打包出来,在index.html直接引用,减小最后上线打包出来vendor文件体积,加快首屏加载速度和打包速度
9、 对复杂页面的弹窗使用lazyRender懒渲染组件,优化该页面的打开速度。
10、webpack build打包优化
11、1对每个页面vuex进行优化,提到全局方法,减少大量重复代码
12、对页面自适应样式进行优化, 用全局css代替原来的css;减少了每个页面css代码
13、 对表格进行优化,提取出列名等写出数组,减少表格html体积
14、引入顶部进度条插件,提高页面加载体验
15、研究首页优化方法,加快单页面首页加载体验
16、同一个组件比如多个编辑页面切换时,本来的方案是使用watch.$route进行处理,经参考也可以在路由上加唯一key,保证切换路由重新渲染。参考http://www.jianshu.com/p/c315c9211146中的router-view
17、合理使用vuex,频繁切换的页面组件比如多个编辑页面,保存多个数据store,减少http请求。
项目中一些问题及处理方案:
一.单页面应用程序首屏加载过慢
查看原因:npm install cross-env --save-dev npm run analyze浏览器看信息。
在Vue项目中,引入到工程中的所有js、css文件,编译时都会被打包进vendor.js,浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多,那么vendor.js文件体积将会相当的大,影响首屏的体验。
解决方法是,将引用的外部js、css文件剥离开来,不编译到vendor.js中,而是用资源的形式引用,这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来,达到加速首开的目的。
外部的库文件,可以使用CDN资源,或者别的服务器资源等。
Eg:
<scriptsrc="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
// 在webpack基础配置中添加以下代码
module.exports = {
externals: {
jquery: 'jQuery'
}
1、JS文件按需加载
如果没有这个设置,项目首屏加载时会加载整个网站所有的JS文件,所以将JS文件拆开,点击某个页面时再加载该页面的JS是一个很好的优化方法。
把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
写法:
{
path: '/index',
name: 'HelloWorld',
component: (resolve) => require(['../components/HelloWorld.vue'], resolve)
},
这里用到的就是vue的组件懒加载。在router.js中,不要使用import的方法引入组件,使用require.ensure。
import index from '@/components/index'const index = r => require.ensure([],() => r(require('@/components/index'),'index'))
// 如果写了第二个参数,就打包到该`JS/index`的文件中
// 如果不写第二个参数,就直接打包在`JS`目录下。const index = r => require.ensure([],() => r(require('@/components/index')))
2、路由懒加载
懒加载的意思是当路由被访问的时候才加载对应组件,而不是在首页就全部加载,以此来提高首页反应速度
router/index.js
当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
3、代码模块化
咱们可以把很多常用的地方封装成单独的组件,在需要用到的地方引用,而不是写过多重复的代码,每一个组件都要明确含义,复用性越高越好,可配置型越强越好,包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。
4、for循环设置key值
在用v-for进行数据遍历渲染的时候,为每一项都设置唯一的key值,为了让Vue内部核心代码能更快地找到该条数据,当旧值和新值去对比的时候,可以更快的定位到diff。
5、更加理解Vue的生命周期
vue组件销毁时,会自动解绑他的全部指令及时间监听器,但是仅限于时间本身的事件,定时器的销毁需要手动去除
不要造成内部泄漏,使用过后的全局变量在组件销毁后重新置为null
6、可以使用keep-alive
keep-alive是Vue提供的一个比较抽象的组件,用来对组件进行缓存,从而节省性能。
7、节流防抖
8、图片的懒加载
使用vue-lazyload库
9、无状态的组件标记为函数式组件
可以提高性能,减少内存的消耗
<template functional>
</template>
9、合理利用计算属性的依赖缓存
二、打包层面
1、使用cdn的方式外部加载一些资源
比如vue-router、axios等Vue的周边插件,在webpack.config.js里面,externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
}
2、不让css打包在一起(让css文件和单文件打包在一起)
默认css会打包到一个css 里面,一个就太大了
所以 在 webpack.prod.conf.js 里面把所有块打包在一起设置为false
allChunks: false,
3、不生成.map文件
在config/index.js中将productionSourceMap的值修改为false,就可以在编译时不生成.map文件了这里还要注意sourcemap的配置分 开发(dev)和线上(build)两个地方配置,开发我们就不管了,就用默认的,线上我们是不需要这个代码的。
4、gzip压缩
nginx.conf文件目录,在配置文件中添加以下语句,即可实现gzip压缩。gzip的压缩效率极高,压缩代码必备。
5、减少图片使用
因为对于网页来说,图片会占用很大一部分体积,所以,优化图片的操作可以有效的来加快加载速度。可以用一些css3的效果来代替图片效果,或者使用雪碧图来减少图片的体积。
6、按需引入
咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分,无端增加项目体积。比如在使用element-ui库的时候,包括loadsh等工具库可以只引入需要用到的组件。