在前端面试时，面试官最常问的问题就是：你在写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
<img class="image" v-lazy="imgUrl"/>
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 防抖和节流
今天打字手酸了，后续再更新。。。
image.png
以上都是我工作中常用到的项目优化方法，文中有不足或者读者有疑问或更好的见解，欢迎留言讨论。
如果觉得该篇文章对您有帮助，别忘了留下您的足迹，点个赞❤噢
网友评论