vue性能优化之大陆货色

一、修改productionSourceMap为false

在config👉index.js👉build

productionSourceMap: false,

默认为true，改为false有两大优点，代码体积变小，安全。原因请百度。

 

二、异步与懒加载

1、路由

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

const HomeCont = ()=>import("@/components/HomeCont")

export default new Router({

  routes: [

    {

      path: '/',

      name: 'HomeCont',

      component: HomeCont,

    },

  ]

}）

2、组件

<Seckill ref="seckill"></Seckill>

components: {

      Seckill:() => import('@/components/common/home_module/seckill'),

    },

异步路由打包会多出很多js文件，项目大时注意页面效果，使用swiper插件时有个坑。

如果组件中用了ref,那要开启定时器，不然报没定义。

 setTimeout(()=>{

              this.$refs.seckill

     },100)

3、图片使用懒加载

 

三、代码的写法

1、注意v-if与v-show

2、v-for绑定key

3、 减少watch的数据