vue 首屏优化 + 性能优化 + 打包优化

一、首屏优化

计算首屏打开时间：在打开时间浏览器 开发者工具 console 中执行 下面代码

(performance.timing.domComplete-performance.timing.navigationStart)/1000

浏览器开发模式，performance 页面标签下可以执行查看

---

1.用户体验 三 种

loading动画，骨架屏，渐进式加载内容（懒加载）

2. 图片处理 六 种方式

小图片base64, 合并成雪碧图，压缩图片，css动效替换动图，图片懒加载，图片代理加载

图片代理加载
	<image id="imgId">
    function proxyImage(){
        let image = new Image()
        image.onload=function(){
            document.getElementById("imgId").setAttribute("src",this.src)
        }
        return function(src){
            image.src = src
        }
    }


// 图片懒加载 offsetTop < innerHeight+scrollTop

<img src="loading.gif" data-src="1.jpg">
<img src="loading.gif" data-src="100.jpg">

let num = document.getElementbytagname("img").length
let img = document.getElementbytagname("img")
lazyload();
window.onscroll = lazyload
function lazyload(){
  // 可见区域高度
  let seeHeight = document.innerHeight;
 // 滚动条距离顶部的高度funding条距离顶部的高度
 let scrollTop = document.body.scrollTop;
 for(var i=0;i<num;i++){
   if(img[i].offsetTop < seeHeight+ scrollTop){
        var temp = new Image();
        temp.src = imgs[i].getAttribute('data-src');//只会请求一次
        // onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
        temp.onload = function(){
          // 获取自定义属性data-src，用真图片替换假图片
          imgs[i].src = imgs[i].getAttribute('data-src')
        }
   }
 }

}

3 打包优化后减小http带宽请求 三种

splitChunks分片公用文件打包，打包压缩，cdn 不需要打包，

4 代码优化 （抖音三剑客，fk需懒）

见 二、vue 性能优化（代码）

• 防抖，截流
• 组件异步加载（按需引入）
• html,css,js 的写法
• v-for 两种 : 不和v-if ，代理事件
• 缓存 ： keep-alive + 请求缓存到浏览器storage
• 需 ：长列表虚拟滚动，
• 懒：图片懒加载，路由懒加载

口诀：抖 ，异 ，三剑客，for ，k， 需， 懒
谐音:抖音三剑客，fk需懒

---

二、vue 性能优化（代码）

1.html 不渲染的 标签用 vue-fragment 替换

vue 下载包: npm i -s vue-fragment

// main.js里面
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)
// vue页面代码 ,生成的是注释减小dom操作
<template>
	  <fragment>
			<div>test</div>
	</fragment>
</template>

2. js :vue2 数据冻结

//data()里面不需要修改的,冻结后不会递归执行 数据劫持object.definePrototype
object.freeze(mapList) 

3. css scope少用

<div clsss="testPage">测试红色页面</div>
<style scoped>
.testPage{
	background:red
}
</style>

// 加入scoped 后渲染的页面会变成下面，css渲染效率变低
<div clsss="testPage" v-data-7987979 >测试红色页面</div>
<style scoped>
.testPage[v-data-7987979]{
	background:red
}
</style>

4 v-for 不和 v-if 使用

5 v-for 事件代理

不用代理

<div>
	<span v-for='(item, index)' of 100 :key='index' @click=''function() {}">{{item}}</span>
</div>

改成代理

<div @click=''clickEvent">
	<span v-for='(item, index)' of 10000 :key='index' :data-index='index'>{{item}}</span>
</div>
export default {
	methods: {
		clickEvent(e) {
			console.log(`当前选中下标为${e.target.dataset.index}`)
		}
	 }
}

6 缓存：keep-alive 动态缓存 ，请求缓存到浏览器storage

<keep-alive :include=''>

9 组件按需引入异步加载

const AsyncList = () => ({
  component:  () => import("components/List"),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 500
})
export default {
  name: 'Example',
  component: {
    AsyncList // 工厂模式
  }
}

9.路由懒加载 三种方法

// 1.webpack的require.ensure技术，也可以实现按需加载
// 2 require 箭头函数
// 3 import 箭头函数
const List2 = r => require.ensure([], () => r(require('@/components/list')), 'list');

const router = new Router({
  routes: [
   {
     path: '/list2',
     component: List2
   },
   {
     path: '/list',
     component: resolve => require(['@/components/list'], resolve)
   },
    {
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true
  },
  ]
})

---

三、打包优化

1 避免重复打包文件，

公共文件打包成一个文件，避免多次http请求

module.exports={
    externals:[vue],
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vendor','runtime'],
            filename: '[name].js',
            minChunks:2
        }),
    ]
}

2 打包开启gzip压缩

    plugins: [
      new CompressionWebpackPlugin({
        filename: "[path].gz[query]",
        algorithm: "gzip",
        test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), //匹配文件名
        threshold: 10240, //对10K以上的数据进行压缩
        minRatio: 0.8,
        deleteOriginalAssets: false //是否删除源文件
      })
      

代码来源：https://blog.csdn.net/qq_34707272/article/details/107222943

3 Tree Shaking/Scope Hoisting

4 使用cdn加载第三方模块，extenal 排除打包

5 多线程打包 happypack

6 splitChunks抽离公共文件

打包过程，根据配置设置多个文件
module.exports={
    optimization:{
        runtimechunks:"single" ,// 模块交互时，连接模块的加载解析逻辑
        splitChunks:{
            cacheGroups:{
                commons:{
                    chunks:"initial",
                    minChunks:2,// 使用两次以上的打包到公共文件中
                    minsize:0  
                }
                vendor:{
                    test:/node_moduless/,
                    chunks:"initial",
                    name:"vendor",
                    enforce:true
                }
            }
        }
    } 
}

7 sourceMap优化

devtool:cheap-module-eval-source-map // 开发
devtool:cheap-module-source-map // 生产，没有对应关系eval