vue 判断页面加载完成_Vue 项目里戳中你痛点的问题及解决办法(下)

作者：愣锤 https://juejin.im/post/5b174de8f265da6e410e0b4e

前言

最近要求使用vue进行前后端分离开发微信公众号，不断摸索踩坑之后，总结出如下几点vue项目开发中常见的问题及解决办法。如果你是vue大佬，请忽略小弟的愚见^V

• 查看打包后各文件的体积，帮你快速定位大文件

• 路由懒加载(也叫延迟加载)

• 开启gzip压缩代码

• 详情页返回列表页缓存数据和浏览位置、其他页面进入列表页刷洗数据的实践

• css的scoped私有作用域和深度选择器

• hiper打开速度测试

• vue数据的两种获取方式+骨架屏

• 自定义组件(父子组件)的双向数据绑定

• 路由的拆分管理

• mixins混入简化常见操作

• 打包之后文件、图片、背景图资源不存在或者路径错误的问题

• vue插件的开发、发布到github、设置展示地址、发布npm包

查看打包后各文件的体积，帮你快速定位大文件

如果你是vue-cli初始化的项目，会默认安装webpack-bundle-analyzer插件，该插件可以帮助我们查看项目的体积结构对比和项目中用到的所有依赖。也可以直观看到各个模块体积在整个项目中的占比。很霸道有木有~~

npm run build --report // 直接运行，然后在浏览器打开http://127.0.0.1:8888/即可查看

记得运行的时候先把之前npm run dev开启的本地关掉

路由懒加载(也叫延迟加载)

路由懒加载可以帮我们在进入首屏时不用加载过度的资源，从而减少首屏加载速度。

路由文件中，

非懒加载写法：

import Index from '@/page/index/index';
export default new Router({
    
    routes: [
        {
    
            path: '/',
            name: 'Index',
            component: Index
        }
    ]
})

路由懒加载写法：

export default new Router({
    
  routes: [
        {
    
            path: '/',
            name: 'Index',
            component: resolve => require(['@/view/index/index'], resolve)
        }
   ]
})

开启gzip压缩代码

spa这种单页应用，首屏由于一次性加载所有资源，所有首屏加载速度很慢。解决这个问题非常有效的手段之一就是前后端开启gizp(其他还有缓存、路由懒加载等等)。gizp其实就是帮我们减少文件体积，能压缩到30%左右，即100k的文件gizp后大约只有30k。

vue-cli初始化的项目中，是默认有此配置的，只需要开启即可。但是需要先安装插件：

// 2.0的版本设置不一样，本文写作时为v1版本。v2需配合vue-cli3cnpm i compression-webpack-plugin@1.1.11

然后在config/index.js中开启即可:

build: {
    
    // 其他代码
    …………
    productionGzip: true, // false不开启gizp，true开启
    // 其他代码
}

现在打包的时候，除了会生成之前的文件，还是生成.gz结束的gzip过后的文件。具体实现就是如果客户端支持gzip，那么后台后返回gzip后的文件，如果不支持就返回正常没有gzip的文件。

注意：这里前端进行的打包时的gzip，但是还需要后台服务器的配置。配置是比较简单的，配置几行代码就可以了，一般这个操作可以叫运维小哥哥小姐姐去搞一下，没有运维的让后台去帮忙配置。

详情页返回列表页缓存数据和浏览位置、其他页面进入列表页刷新数据的实践

这样一个场景：有三个页面，首页/或者搜索页，商品分类页面，商品详情页。我们希望从首页进入分类页面时，分类页面要刷新数据，从分类进入详情页再返回到分类页面时，我们不希望刷新，我们希望此时的分类页面能够缓存已加载的数据和自动保存用户上次浏览的位置。之前在百度搜索的基本都是keep-alive处理的，但是总有那么一些不完善，所以自己在总结了之后进行了如下的实践.

解决这种场景需求我们可以通过vue提供的keepAlive属性。这里直接送上另一篇处理这个问题的传送门吧:https://juejin.im/post/5b2ce07ce51d45588a7dbf76

CSS的coped私有作用域和深度选择器

大家都知道当 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。那么他是怎么实现的呢，大家看一下编译前后的代码就明白了：

编译前：

编译后：

看完你肯定就会明白了，其实是在你写的组件的样式，添加了一个属性而已，这样就实现了所谓的私有作用域。但是也会有弊端，考虑到浏览器渲染各种 CSS 选择器的方式，当 p { color: red } 设置了作用域时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example { color: red }