vue项目初次优化

着手优化我最早想到的是，打包，加载，速度，渲染，用户体验；因此个人也从这几个词开始入手。本次优化主要作了三件事，代码（vue），懒加载，骨架屏；还有不少会继续作。。。

代码

打包 webpack

如今虽然开发是按照模块化开发，webpack也是遵循的模块打包的，可是打包是按照模块打包了吗？

webpack先简单说一下！webpack本就是分块打包，因此不用过多注意。（JS引入了相同的库和模块，这时候将公共的库抽成一个JS文件，就用CommonsChunkPlugin）

• 上代码！！！优化前

  

  因为平时的不注意，代码中大量的组件引用都是用这种方式；

  可这样就致使了首屏展现或第一次加载中，不用的组件也打包到了入口js中（app.js）;获得的结果就是首屏js愈来愈大，加载时间也就长了；

• 优化

  很简单，改为异步就好；

其实在router中就已经使用了！

修改完成后打包，就能够看到效果；

1. js文件明显增长了
2. 页面中head标签中 一样增长了js引入；
3. 这里须要注意的是js引入放到head中会不会影响优化？其实不会的，由于引入的script标签中加了async属性使其变成了异步；

   

   head标签

   

代码

1. 增长了v-if的使用，特别是针对全部不是频繁切换组件和dom；而这么作是由于v-if和v-show的区别；v-if是“true”条件渲染，v-show是什么条件都渲染
2. 组件异步加载，也就打包部分的讲到的；可是判断组件是否异步，就须要根据首屏展现的dom结构自行选择，不是全部组件适合异步加载；
3. 为了评分也在图片上，加上alt的默认参数；

骨架屏

骨架屏就很简单了，按照使用页面的结果编写就ok了；

有个插件：vue-content-loader 也能够在线编辑骨架屏；

但当前项目用了ssr，首屏的骨架屏就鸡肋了！so 我就在第二屏及之后加上了骨架屏，而第三屏正好是一张特别大的详情图片，关键设计没有切成若干小图，是一大张，长，长长，长长长的详情图片！严重影响了页面的loading速度

懒加载

懒加载作了一个组件，而代码是直接拿vue-lazy-component组件的；方便修改和调试；

• vue-lazy-component代码

  主要用了原生的IntersectionObserver（交叉观察器）构造函数；

var io = new IntersectionObserver(callback, option);
复制代码

• IntersectionObserver函数

  解释：监听目标元素与视口产生一个交叉区

  介绍直接代码

let io = null;
// 回调函数
var callback = function(entries) {
    if (
        // 正在交叉
        entries[0].isIntersecting ||
        // 交叉率大于0
        entries[0].intersectionRatio
    ) {
        // 在组件销毁前取消观察-销毁方法
        io.unobserve(this.$el);
    }
};
// 观察视口与组件容器的交叉状况
io = new window.IntersectionObserver(callback, {
    // 容器窗口，滚动的父元素
    root: this.viewport,
    // 能够在父级（root）影响范围 扩展或缩小，相似css的margin～
    rootMargin,
    // 触发回调的位置，“%”单位， [0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。
    threshold: [0, Number.MIN_VALUE, 0.01]
});
// 观察对象-挂载方法
this.io.observe(this.$el);
复制代码

待续。。。