前端面试必问--Vue项目优化（全）

在前端面试时，面试官最常问的问题就是：你在写Vue项目的时候做了哪些优化？
我自己在多次面试或者笔试中遇到了这样的问题，因此结合自己工作所用到的方法进行总结。

1. 加载方面

1. 1 路由懒加载

普通加载：webpack在打包的时候会把整个路由打包成一个js文件，如果页面很多，会导致这个文件非常大，加载缓慢
动态加载：直接把某个路由下的所有组件都打包在同个异步块 (chunk) 中，即每个路由下的所有组件在打包后都是一个个单独的文件
推荐：建议使用动态加载，在访问页面的时候才去请求资源，用户体验更好

//没有指定webpackChunkName,每个组件打包成一个单独的js文件
const test1 = ()=>import('@/components/test1.vue') 
const test2 = ()=>import('@/components/test2.vue')

//指定了相同的webpackChunkName，会合并打包成y一个js文件
const test3 = ()=>import(/* webpackChunkName:'grounpTest' */ '@/components/test3.vue') 
const test4 = ()=>import(/* webpackChunkName:'grounpTest' */ '@/components/test4.vue')

1. 2 图片懒加载--使用vue-lazyload插件

插件下载：https://github.com/hilongjw/vue-lazyload

使用步骤：其实这个插件做简单使用的话是很简单的，按下边的实例即可。

（1）安装插件：

npm install vue-lazyload --save-dev

（2） main.js引入插件(需要将error.png、loading.png放到static/img目录下)

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
    error:'./static/img/error.png',  // 图片加载失败时显示的图片
    loading:'./static/img/loading.png' // 图片加载中显示的图片
})

（3） vue文件中将需要懒加载的图片绑定v-bind:src 修改为v-lazy

1. 3 第三方库使用CDN资源

常用的CDN资源查询网站：https://www.bootcdn.cn/

bootCDN网站

1. 4 使用的组件库以及其他的一些插件按需加载

以Vant组件库为例：

安装vant

npm install vant --save

安装babel-plugin-import
这是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
.babelrc中配置plugins

// 注意：webpack 1 无需设置 libraryDirectory
"plugins": [
    "transform-runtime",
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]

按需使用vant组件

import { NavBar, Row,  Button } from 'vant'
Vue.use(Row).use.(Col)
Vue.use(Button)

2 代码压缩方面

2.1 使用 UglifyJsPlugin

UglifyJsPlugin插件：
作用：删除代码中的console 语句注释的语句以及空格等，使代码更加紧凑。
提示：webpack 4.0 默认已经内部配置，不用再配置
在webpack.config.js 配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
 plugins: [
   new UglifyJsPlugin({
     // 允许并发
     parallel: true,
     // 开启缓存
     cache: true,
     compress: {
       // 删除所有的console语句    
       drop_console: true
     },
     output: {
       // 不保留注释
       comment: false,
       // 使输出的代码尽可能紧凑
       beautify: false
     }
   })
 ]
}

2.2 图片压缩

在说压缩图片方法前，先来谈谈常见图片的特点：
jpg ：有损压缩、体积小、加载快、不支持透明图片
PNG-8 与 PNG-24 ：无损压缩、质量高、体积大、支持透明
SVG：文本文件、体积小、不失真、兼容性好
SVG（可缩放矢量图形）是一种基于 XML 语法的图像格式。它和上面的几种图片有着本质的不同：SVG 对图像的处理不是基于像素点，而是是基于对图像的形状描述。

在线压缩图片工具：https://www.apowersoft.cn/compress-image-online
步骤：选择图片 --> 压缩 --> 下载文件

image.png

base64 （小图片适合）
（1）找到一款在线的转base64工具
站长工具：http://tool.chinaz.com/tools/imgtobase
（2）上传图片，得到相应的base64编码

base64转换
雪碧图
将大量的图片合成一张雪碧图（Sprite）来用作背景图，可减少http请求数。雪碧图一般来说由公司的UI出图，可直接使用PS工具制作，在此就不缀述了。使用时通过控制background-position属性值来确定图片呈现的位置。

#box{
  height: 25px;
  width: 25px;
  background-image: url("../../img/ico1.gif");
  background-position: -42px 0;/*图片往左移动42个px*/
}

2.3. 为开发模式与发布模式指定不同的打包入口

默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件（即 src/main.js）。为了将项目的开发过程与发布过程分离，我们可以为两种模式各自指定打包的入口文件，即：

① 开发模式的入口文件为 src/main-dev.js
② 发布模式的入口文件为 src/main-prod.js

3. 缓存方面

3.1. 利用keep-alive结合导航守卫实现页面缓存

3.2 防抖和节流

今天打字手酸了，后续再更新。。。