vue 项目优化

1. productionSourceMap

• productionSourceMap是使用vue-cli创建项目的时候在condif/index.js（vue-cli3中是vue.config.js） 文件中的一个属性。一般情况下我们是要将这个属性设置为false（初始值是true）,如果设置的初始值是true，我们项目上线之后再生产环境可以看到所有的源码。所以我们为了安全还是要将其设置为false的。

2. 使用webpack进行优化，compression-webpack-plugin 开启gzip

• 打包的时候开启gzip可以大大减少体积，非常适合线上部署，
• 在vue项目配置中设置productionGzip:true;
• 设置需要压缩的文件productionGzipExtensions: [‘js’, ‘css’,‘svg’],这个数组中的可以添加你想要的压缩的文件后缀。
• 设置webpack.prod.config.js文件中的plugins,添加下面的代码。（一般情况下使用vue-cli2.x搭建的项目都是有这段代码的）

    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })

• 查看压缩之后的大小情况可以使用webpack-bundle-analyzer插件（vue-cli2.x项目中也是有的） “report”:“npm run build --report=true”
• 注意点：使用这个compression-webpack-plugin插件的时候会有版本的问题。使用的时候注意：目前最新版需要运行在webpack4.0以上，如果你的webpack是3.x版本的，请安装compression-webpack-plugin的1.x版本。

3. 对路由组件进行懒加载：

• 在路由配置文件中：如果使用同步的方式加载组件，在首屏加载的时候会对网络资源加载的比较多，资源比较大。加载速度比较缓慢。所以这个时候我们可以通过懒加载路由的方式来优化。按需加载会j加速首屏渲染。
• 按需加载也有一些问题：打包的时候项目不会把所有的js打包进app.[hash].js里面，可以减少app.[hash].js的体积，缺点是会将其他的js分开打包。造成多个js文件。会有多次http请求。如果项目比较大，需要注意懒加载的效果。
• https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97
• 注意：在开发环境的时候不要使用懒加载，懒加载页面太多会造成wwebpack热更新太慢。所以我们只在生产环境使用懒加载。

  // 懒加载实现
  import Vue from "vue";
  import Router from "vue-router";
  Vue.use(Router);
  export default new Router({
  mode: "history",
  base: "/facex/district/",
  routes: [
    { path: "/", redirect: "index" },
    {
    path: "/",
    name: "home",
    component: resolve=>require(["@/views/home"],resolve),
    children: [
      {
        // 员工查询
        path: "/employees",
        component: resolve=>require(["@/components/employees"],resolve)
      },
    {
      // 首页
      path: "/index",
      component: resolve=>require(["@/views/index"],resolve)
    }]
  })    

4. 源码优化(这部分一般是一些代码规范的问题，日常开发中多注意一些)

(1)：v-if和v-show的使用:

1. v-if类似于懒加载，只有为true的是时候才会渲染，为false的时候不会占用布局空间。

• 在首屏的时候建议还是使用v-if,因为我们首屏一般追求的是用户的初次体验，所以尽可能的减少一开始DOM的数量，从而提交首屏的渲染速度
• 在模板中v-if的判断尽量少用表达进行判断，最好还是将这部分写入到computed或者是methods中。封装成为一个方法。这样更加有利于我们进行判断。

2. v-show状态无论是false还是true，都会进行渲染，并占用布局空间。需要频繁调用，不涉及权限的时候可以使用v-show，可以减少系统的切换开销。

(2): 遍历渲染的时候设置唯一key值:

1. 遍历渲染的时候设置唯一key值,这样方便vuejs内部机制精准找到该条数据。当数据状态更新的时候可以快速替换,key的作用主要是为了高效的更新虚拟DOM。

(3): 组件化

1. 我们将项目中的组件细分，按钮组件，表格组件，分页组件等等。细分成一个一个单独的组件，这样渲染起来比较快。

(4)：减少监听的数据。

1. vue中使用watch监听数据。当父组件中的某个数据变化的时候，可能会有一个或者多个子组件使用watch监听这个改变的数据。当watch监听的数据量比较小的时候影响微乎其微，但是当项目比较大的时候，监听的数据比较多，这个时候就会出现卡顿的问题。如果我们需要数据全局变化，我们可以使用时间中央总线，或者是vuex进行处理。

(5)：资源按需加载

1. 图片的懒加载:

• 使用 vue-lazyload 对图片进行懒加载。 https://www.npmjs.com/package/vue-lazyload

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload,{
  loading: require(),
  error:require(),
})

<!--用法1:图片标签直接使用：-->
<img v-lazy="'/static/img/' + item.productImage" :key="'/static/img/' + item.productImage"> //将 :src 属性直接改为v-lazy, :key是为了防止刷新页面或图片更改时图片不更新

<!--用法2：标签背景图片使用：-->
<div style="width:100px;height:100px;" v-lazy:background-image="{src: item.imgpath}"></div>

<!--用法3：多个img标签的时候使用：-->
<div v-lazy-container="{ selector: 'img', error: 'error.jpg', loading: 'loading.jpg' }">
  <img data-src="www.baidu.com/img1.jpg">
  <img data-src="www.baidu.com/img2.jpg">
  <img data-src="www.baidu.com/img3.jpg">  
</div>

2. 骨架屏：一般我们开发一些首页的内容会很多。会出现黑/白屏或者页面不急混乱的问题。这个时候我们可以使用骨架屏，当数据还没有出现的时候有一个大概的框架。然后结合懒加载。用户体验会好一点。

(6)：SSR服务端渲染

1. 当项目比较大的时候，我们可以使用服务端渲染。但是目前服务端渲染的有一定的局限性。以后再补充。

• 想了解的可以看下：https://cn.vuejs.org/v2/guide/ssr.html

Vue项目优化的办法还有很多很多。上面所提及的只是最为基础的几种，随着业务的需求以后还会去探索更多的优化方法。

最近一直在思考我工作的这一年中的问题，感觉自己还是缺少总结，一个项目做过去就过去了，没有提炼出这个项目所带给我的深层的经验。这也导致了我在面试准备的时候回想起自己做过的项目感触深刻的技术点很少。希望如果和我有同样问题的小伙伴引以为戒！！！

-------------------------------------------------------------------------2020年6月22日15:57:37----------------------------------------------------------------------------
补充：
1、Object.freeze() 冻结对象，防止对象被修改，对象被冻结之后vue不会做getter和setter转换。
如果在一个项目中有一个巨大的数组或者是对象，但是这个数据不会被改动（不能给这个对象新增属性，或者删除属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值，该对象的原型也不能被修改）。这个时候就可以是用Object.freeze()，可以提升性能
主要：Object.freeze()冻结的是值，数据的指向还是可以被更改的。
详情：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze