嗯,搞点大事情

记录一些大公司,高级前端工程师的前端优化经验总结,并尝试着做些实验,以后肯定用的上,当看到新的技能时,实时更新在这篇文章。

DNS预解析

我们请求资源时,通常都是一个URL,拿到正确的ip地址必须经过一步DNS解析。DNS预解析的作用是在到某个页面是提前解析了DNS。用法都是这样:

1
<link rel="dns-prefetch" href="hiluluke.cn">

在很多大厂,比如jd.com、taobao.com等的head部分你就能看见很多上面这样的link标签。
然而其使用方法,并不是像上面这样简单,具体的看这篇文章,本文不多做解释。

本文所涉及代码全在vue-cnode

前面两篇都是介绍组织结构和vue-router,从本文开始我们将讲一些如何优雅的用vue编写单页应用。首先我们从登录页面以及开始,因为后续很多其它的页面都需要登录信息。

路由,文件组织

首先我们第一步肯定是指定一条路由啦,在src/config_router.js里面增加一条路由

1
2
3
4
5
6
7
8
9
10
11
export function configRouter (router) {
router.map({
'/login': {
name: 'login',
title: '登录',
// es6箭头函数
component: (resolve) => require(['./components/login/login.vue'], resolve)
}
})

}

自动化部署hexo

By hiluluke on

作为一名小前端,对于页面的优化肯定是有追求的。本文将利用gulp来压缩hexo生成的文件,并利用npm命令自动部署我们的博客。

添加gulp

首先你需要全局安装gulp: npm install -g gulp

本文所涉及代码全在vue-cnode

vue-router主要作用是将路由控制,转移到前端。我们将会在vue-router里面保存一个路由表,在vue中具体通过调用提供的指令或则方法进行跳转。

其实吧,vue-router说白了就是一个插件,对外暴露的也就是指令和方法。如果只要求灵活用起来,我们需要学习的也就3个地方:

  • 配置路由
  • 指令
  • 方法

本文所涉及代码全在vue-cnode

单页应用,即在一个页面集成系统中所有功能,整个应用只有一个页面。因为路由的控制在前端,单页面应用在页面切换时比传统页面更快,从而在前端体验更好。

将逻辑从后端转移到前端,提升了性能减少了页面加载时间,前后逻辑更扁平。但是当页面复杂度变高时,你会发现,数据处理,UI交互将变得难以维护,所以应运而生,出现了很多MV框架和类库。Vue就是其中之一,个人觉得(非喜勿喷)Vue类库相对于其他MV框架上整体的api更为简洁,提供的api很平衡,解决了问题的同时,没有增加复杂度。另外个人觉得vue在大型应用,开发中使用vue-loader将组件分成template,style,script结构更为清晰。

本文以及后面相应文章,主要是vue相关技术栈来快速的实现单页应用开发。系列文章将以一个实际项目进行讲解,项目的github地址为:

vue-cnode demo

这是一个以cnodejs.org提供的api来开发的单页,主要使用的modules有vue、vue-router、vuex、vue-resource。为了快速开发,我们还使用了vue-cli脚手架工具,下文会做介绍。