当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。 官方地址
component: () => import('@/views/')
const name=()=>import('@/XX.vue');
也就是图片按需加载(产生原因:图片的加载是同步的,若图片数据过大,加载时会阻塞浏览器继续向下解析,用户体验非常差。)
//1.CDN引用vue-lazyload
//2.main.js中
Vue.use(VueLazyload)
//说明:若页面出现图片抖动的情况,则需设置默认图片(loading) ,加载错误的图片(error)
Vue.use(VueLazyload,{
error: require('./assets/img/XX.png'),
loading: require('./assets/img/XX.png')
});
//3.page中使用
data:imgmtbd:require('../assets/img/imgmtbd.png')
v-if判断是否加载,可以减轻服务器的压力,在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性,可以使客户端操作更加流畅,但有更高的初始渲染开销。如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
(1)方法:路由跳转、公共请求、请求同一个接口、过滤器、正则表达式、公共调用插件的相关方法等等
(2)组件:轮播图、区域选择、分页、时间弹窗、二维码分享弹窗、新闻列表栏目、公共模块等等
注意:官网中提供的cdn不太稳定,建议下载下来放置到公司提供的cdn上面
//index.html
//vue页面使用
swal("确定",buttons:{确定});
computed:
1、支持缓存,只有依赖数据发生改变,才会重新进行计算;
2、不支持异步,当computed内有异步操作时无效,无法监听数据的变化;
使用场景:分页中需要实时展示几栏分页数据;
watch:
1、不支持缓存,数据变,直接会触发相应的操作;
2、watch支持异步;
3、监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
使用场景:监听路由变化;
v-for 比 v-if 优先级高,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候,必要情况下应该替换成 computed 属性
使用filter,v-for="el in modularName.filter(obj=>{})"
若只使用一次可用computed
一般web网页会有多个请求,阔以相应减少请求个数,减少页面加载时间
一些公共的参数阔以在app.vue中定义,采用vue挂载到window下面
data:function(){
return{
routeDefine:''//公共动态参数
}
},
initConfig() {
window.Vue = this;//将vue挂载到window下面
},
created(){
this.routeDefine=this.$route.params.define;
}
加快页面加载速度
1、GZIP压缩
1.config-index.js
productionGzip:true
2.安装依赖compression-webpack-plugin:
npm install --save-dev [email protected]
3.nginx 服务端修改http配置:
http:{
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg
image/gif image/png;
}
2、webpack压缩图片
压缩命令:cnpm install image-webpack-loader --save-dev
3、优化webpack打包
参考来源:
vue中v-if与v-show的区别以及使用场景.
Vue中computed和watch的区别.