router构建单页应用,你一定是闲得蛋疼才重构的

作者: 前端知识  发布:2019-07-11

参考

Chrome 中的 First Meaningful Paint

Using SVG

Modern JavaScript Explained For Dinosaurs

1 赞 收藏 评论

金沙澳门官网网址 1

  • Vue2简单入门
  • Vue.js再入门
  • Vue.js使用vue-router构建单页应用
  • Vue.js状态管理工具Vuex快速上手

进一步优化

五、<router-link>标签属性

//to属性 string|object
<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>
<!-- 同上 -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数,下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

//replace属性 true|false 不留下 history 记录。
<router-link to="home" replace>Home</router-link>

//append属性 true|false 追加路径
<router-link to="home" append >Home</router-link>

//tag属性 string 设置渲染标签
<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染结果 -->
<li>foo</li>

//active-class 属性 string 激活时使用的 CSS 类名

3. 优化图片

虽然代码做了很多优化,但是动辄几十到几百KB的图片瞬间碾压了辛苦重构带来的提升。所以图片的优化也是至关重要滴~

1. PNG改成SVG

由于项目曾经支持IE6-8,大量使用了PNG,JPEG等格式的图片。随着历史的车轮滚滚向前,IE6-8的用户占比已经大大降低,我们在去年放弃了对IE8-的支持。这样一来就能采取更优的解决方案啦~

我们的页面上有各种大小的图标和不同种类的占位图。原先使用位图并不能很好的适配retina显示器。现在改成SVG,只需要一套图片即可。相比PNG,SVG有以下优点:

  1. 压缩后体积小
  2. 无限缩放,不失真
  3. retina显示器上清晰

2. 进一步“压榨”SVG

虽然换成SVG,但是还远远不够,使用webpack的loader可以有效地压缩SVG体积。

  • 用svgo-loader去除无用属性

SVG本身既是文本也是图片。设计师提供的SVG大多有冗余的内容,比如一些无用的defstitle等,删除后并不会降低图片质量,还能减小图片体积。

我们使用svgo-loader对SVG做了一些优化,比如去掉无用属性,去掉空格换行等。这里就不细数它能提供的优化项目。大家可以对照svgo-loader的选项配置。

  • 用svg-sprite-loader合并多个SVG

另外,SVG有多种用法,比如:img,background,inline,inline  <use>。如果某些图反复出现并且对页面渲染很关键,可以使用svg-sprite-loader将多个图合并成一个大的SVG,避免逐个发起图片请求。然后使用内联或者JS加载的方式将这个SVG引入页面,然后在需要的地方使用SVG的<use>标签引用该图标。合并后的大SVG如下图:

金沙澳门官网网址 2

使用时:

<svg> <use xlink:href="#icon-add"></use> </svg>

1
2
3
<svg>
  <use xlink:href="#icon-add"></use>
</svg>

即可在使用的位置展现该图标。

以上是一些优化手段,下面给大家分享一下重构后的收益。

一、使用路由

  1. 首先在目录下创建components金沙澳门官网网址 ,文件夹,然后再创建index.vuehello.vue文件
//index.vue
<template>
    <div>
        <h2>Index</h2>
        <hr>
        <p>{{sContent}}</p>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                sContent:"This is index components"
            }
        }
    }
</script>

//hello.vue
<template>
    <div>
        <h2>Hello Vue.js</h2>
        <hr/>
        <p>{{sContent}}</p>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                sContent:"This is hello components"
            }
        }
    }
</script>
  1. 修改main.js文件
//引入并安装vue-router插件
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//引入index.vue和hello.vue组件
import App from './App.vue';
import index from './components/index.vue';
import hello from './components/hello.vue';
//定义路由
const routes = [
    {path:'/',component:App},
    { path: '/index', component: index },
    { path: '/hello', component: hello }
]
//创建 router 实例,然后传 routes 配置
const router=new VueRouter({
  routes
});
//创建和挂载根实例。通过 router 配置参数注入路由,从而让整个应用都有路由功能
new Vue({
  el:"#app",
  router
});
  1. 修改App.vue
<template>
  <div>
    ![](./assets/logo.png)
    <h1>{{msg}}</h1>
    <ul>
      <router-link to='/index' tag='li'><a href="/index">Index</a></router-link>
      <router-link to='/hello' tag='li'><a href="/hello">Hello</a></router-link>
    </ul>
  </div>
</template>
  1. 修改index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-webpack-simple</title>
  </head>
  <body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="/dist/build.js"></script>
  </body>
</html>

这样就会把渲染出来的页面挂载到这个id为app的div里了。

修改后运行的效果如下:

重构的收益

以下是重构带来的收益:

收益项 重构前 重构后
组件化 100%
模块化 50% 100%
规范化 ESLint 代码规范检查
语法 ES5 ES6
首屏有效渲染时间 1.59s 1.28s(提升19%)
首次交互时间 2.56s 1.54s(提升39%)
  • 组件化:从0到100%老代码没有组件的概念,都是指令式的编程模式以及对DOM的直接操作。重构后,改为组件化以后,可以充分利用组件的高复用性,以及虚拟DOM的性能优化,带来更愉悦的开发体验。
  • 模块化:从50%到100%老代码中也用RequireJS做了一定程度的模块化,但是仅限于业务模块,没有解决第三方依赖的安装和升级问题。重构后,借助webpack和npm,只需要npm install安装第三方依赖,然后用import的方式加载。极大地提高了开发效率。
  • 规范化:从0到1老代码几乎没有代码规范,甚至连同一份文件里都有不同的代码缩进,强迫症根本无法忍受。重构后,使用ESLint对代码格式进行了统一,代码看起来更加赏心悦目。
  • ES6 语法:从0到大量使用老代码所使用的库因为历史悠久,加上没有引入转译流程,只能使用ES5语法。重构后,能够尽情使用箭头函数、解构、async/await等语言新特性来简化代码,从而提升开发体验。
  • 性能提升根据上线前后Lighthouse的性能检测数据,首次有效渲染时间(First Meaningful Paint,FMP)提升 19% 。该指标表示用户看到有用信息的时间(比如文件列表)。首次交互(First Interactive,FI)提升 39%。该指标表示用户可以开始跟网页进行交互的时间 。

以上就是这次重构的总结。不要容忍代码里的坏味道,更不要容忍低效的开发模式。及时发现,勇敢改进吧~

三、嵌套路由

const routes = [
    { path: '/index', component: index,
        children: [
            { path: 'info', component: {template:'<p>This is info component</p>'}}
        ]
     }
]

1. HTML瘦身

在采用组件化开发之前,HTML中预置了许多标签元素,比如:

JavaScript

<button data-cn="del" class="del">删除</button> <button data-cn="rename" class="rename">重命名</button> ...

1
2
3
<button data-cn="del" class="del">删除</button>
<button data-cn="rename" class="rename">重命名</button>
...

当状态改变时,通过JS操作DOM来控制预置标签的内容或显示隐藏状态。这种做法不仅让HTML很臃肿,JS跟DOM的紧耦合也让人头大。改成组件化开发后,将这些元素统统删掉。

之前还使用了很多全局变量存放服务端输出的数据。比如:

<script> var SYS_CONF = { userName: {%$userInfo.name%} ... } </script>

1
2
3
4
5
6
<script>
    var SYS_CONF = {
        userName: {%$userInfo.name%}
        ...
    }
</script>

随着时间的推移,这些全局变量越来越多,管理起来很费劲。还有一些已经废弃的变量,对HTML的体积做出了“贡献”。所以重构时只保留了必需的变量。更多数据则在运行时加载。

另外,在没有模板字面量的年代,HTML里大量使用了script标签存放运行时所需的模板元素。比如:

<script type="text/template" id="sharePanel"> <div class="share"> ... </div> </script>

1
2
3
4
5
<script type="text/template" id="sharePanel">
    <div class="share">
        ...
    </div>
</script>

虽然上线时会把这些标签内的字符串提取成JS变量,以减小HTML的体积,但在开发时,这些script标签会增加代码阅读的难度,因为要不停地切换HTML和JS目录查找。所以重构后删掉了大量的<script>标签,使用vue的<template>以及ES6的模板字面量来管理模板字符串。

四、命名路由

const routes = [
    { path: '/index', component: index,
      name:'index'
    }
]

你一定是闲得蛋疼才重构的吧

2018/07/25 · 基础技术 · 重构

原文出处: 奇舞团 - hxl   

随着“发布”进度条走到100%,重构的代码终于上线了。我露出了老母亲般的围笑……

最近看了一篇文章,叫《史上最烂的开发项目长啥样:苦撑12年,600多万行代码》,讲的是法国的一个软件项目,因为各种奇葩的原因,导致代码质量惨不忍睹,项目多年无法交付,最终还有公司领导入狱。里面有一些细节让人哭笑不得:一个右键响应事件需要花45分钟;读取700MB的数据,需要花7天时间。足见这个软件的性能有多糟心。

如果让笔者来接手这“坨”代码,内心早就飘过无数个敏感词。其实,笔者自己也维护着一套陈酿了将近7年的代码,随着后辈的添油加醋……哦不,添砖加瓦,功能逻辑日益复杂,代码也变得臃肿,维护起来步履维艰,性能也不尽如人意。终于有一天,我听见了内心的魔鬼在呼唤:“重构吧~~”

重构是一件磨人的事情,轻易使不得。好在兄弟们齐心协力,各方资源也配合到位。我们小步迭代了大半年,最后一鼓作气,终于完成了。今天跟大家分享一下这次重构的经验和收益。

单页应用的优缺点

每种技术都有其利弊,单页应用也是如此。

  • 无刷新体验,这个应该是最显著的有点,由于路由分发直接在浏览器端完成,页面是不刷新,对用户的响应非常及时,因此提升了用户体验;
  • 完全的前端组件化,前端开发不再以页面为单位,更多地采用组件化的思想,代码结构和组织方式更加规范化,便于修改和调整;
  • API 共享,如果你的服务是多端的(浏览器端、Android、iOS、微信等),单页应用的模式便于你在多个端共用 API,可以显著减少服务端的工作量。容易变化的 UI 部分都已经前置到了多端,只受到业务数据模型影响的 API,更容易稳定下来,便于提供鲁棒的服务;
  • 组件共享,在某些对性能体验要求不高的场景,或者产品处于快速试错阶段,借助于一些技术(Hybrid、React Native),可以在多端共享组件,便于产品的快速迭代,节约资源。

缺点:

  • 首次加载大量资源,要在一个页面上为用户提供产品的所有功能,在这个页面加载的时候,首先要加载大量的静态资源,这个加载时间相对比较长;
  • 较高的前端开发门槛,MVC 前置,对前端工程师的要求提高了,不再是『切切图,画画页面这么简单』;同时工作量也会增加数倍,开发这类应用前端工程师的数量往往多于后端;
  • 不利于 SEO,单页页面,数据在前端渲染,就意味着没有 SEO,或者需要使用变通的方案。

本文由金沙澳门官网发布于前端知识,转载请注明出处:router构建单页应用,你一定是闲得蛋疼才重构的

关键词: 金沙澳门官网