编码优化：
1.vue 在使用v-for 循环时可以使用事件代理方式监听用户操作，节约性能。
2.可以采用keep-alive缓存组件。
3.尽可能拆分组件，来提高复用性、增加代码的可维护性，减少不必要的渲染。因为组件粒度最细，改组件的数组，它只会渲染当前的组件。
4.v-if 当值为false时内部指令不会执行，具有阻断功能，很多情况下使用v-if替代v-show，合理使用if和show。
5.vue循环中key的取值建议使用数据id，相比index更能保证数据的唯一性，更好 的触发vue虚拟dom采用就地复用策略。
6.data中的所以数据都会被劫持，所以将数据尽可能扁平化，如果数据只是用来渲染可以使用Object.freeze，可以将数据冻结起来，这样就不会增加getter和setter。
7.合理使用路由懒加载、异步组件。
8.页面需要响应式的数据放在data中，其他非响应式数据不需要放在data中，data中的数据都会增加getter和setter，会收集对应的 watcher，这样就会降低性能。
资源加载性能优化
1.使用第三方插件实现按需加载( babel-plugin-component )
2.滚动到可视区域动态加载 ( https://tangbc.github.io/vue-virtual-scroll-list )
3.图片懒加载 (https://github.com/hilongjw/vue-lazyload.git)
4.路由懒加载引入组件页面
5.cdn加速引入资源
6.长列表优化
SEO优化
1.使用服务端渲染（SSR）：Vue.js 2.0 提供了服务端渲染的功能，使得搜索引擎能够更好地索引和解析网站内容。在使用 SSR 时，可以在服务端生成 HTML，而不是在客户端生成，这样搜索引擎可以更好地理解页面内容。
2.使用预渲染（Prerendering）：预渲染是一种在构建时生成静态 HTML 文件的技术。这样搜索引擎就可以直接访问这些静态文件，而不需要等待页面加载完成。使用 Prerendering 可以提高页面加载速度和用户体验。
3.添加 meta 标签：在网页头部添加 meta 标签，包括 title、description、keywords 等，可以让搜索引擎更好地理解网页内容和结构。可以使用 Vue.js 的插件 vue-meta 管理 meta 标签。
4.加载速度优化：优化网站的加载速度，包括压缩 CSS 和 JavaScript 文件、使用 CDN 加速、优化图片等，可以提高用户体验和搜索引擎排名。
打包优化
1.去除项目中所有的console.log()打印
在项目开发中我们不可避免的要使用到特别多的console.log()进行查看,而打包进行清除时由于逻辑错综复杂,且页面较多,清除起来十分麻烦,此时就可以使用到下列方法,这里要提示一句console.log()占用部分内存且影响网站安全,应在不使用时及时进行清除。
//安装模块：npm i babel-plugin-transform-remove-console --save-dev
//配置模块（babel.config.js页面配置）：
const proPlugins = [];
//如果是开发环境，则添加 transform-remove-console 插件
if (process.env.NODE_DEV == "production") {
proPlugins.push("transform-remove-console");
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
],
...proPlugins
]
}
2.图片压缩
使用imagemin-webpack-plugin对项目中的静态大图实现无损压缩，只改变大小不改变质量
//安装模块
//cnpm install image-webpack-loader --save-dev
//注意是npm 安装此模块容易丢包下载不完整
//配置vue.config.js文件：
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
mozjpeg: { //用于压缩 JPEG 图片的选项
progressive: true, //表示是否启用渐进式压缩
quality: 65 //表示压缩质量，值范围为 0-100
},
optipng: { //用于压缩 PNG 图片的选项
enabled: true //enabled 表示是否启用压缩
},
pngquant: { //用于压缩 PNG 图片的选项
quality: [0.65, 0.9], //quality 表示压缩质量，值范围为 0-1
speed: 4 //speed 表示压缩速度，值范围为 1-11
},
gifsicle: { //用于压缩 GIF 图片的选项
interlaced: false //表示是否启用隔行扫描
},
webp: { //用于压缩 WebP 图片的选项
quality: 75 //表示压缩质量，值范围为 0-100
}
})
.end()
3.启用gzip压缩
1.俩种压缩方式(服务端压缩、前端压缩)
2.服务端压缩(服务端压缩：当浏览器发送请求时，服务器进行实时压缩，返回浏览器)
//服务端以node为例：
//可以通过服务器端使用express做gzip压缩，其配置如下：
//服务器端安装包 `npm i compression -D`
//导入包 const compression=require("compression");
//启用中间件 app.use(compression())
//app.js
const express=require("express")
const compression=require("compression")
const app=express()
app.use(compression()) //启用压缩插件
app.use(express.static('./dist')) //压缩public目录下前段打包资源dist
app.listen(80,()=>{
console.log("正在运行3000")
})
//服务端这一块我不太熟悉（有错误请各位前辈指导）
3.前端压缩
使用webpack打包时,进行压缩,浏览器请求时,服务端进行一些配置，返回压缩文件
//使用步骤：
//安装压缩模块：npm install --save-dev compression-webpack-plugin@2
//配置vue.config.js文件：
module.exports = {
...........................
chainWebpack: config => {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
if (process.env.NODE_ENV === 'production') {
// gzip压缩
config.plugin('CompressionPlugin').use(
new CompressionWebpackPlugin({
test: /\.(js|css|json|txt|html|ico|svg|png)(\?.*)?$/i,
threshold: 10240, // 超过10kb的文件就压缩
deleteOriginalAssets: true, // 不删除源文件
minRatio: 0.8 //指定压缩比例达到多少才会进行压缩
})
)
}
}
}
4.两者对比
第一种,因为是实时压缩，所以非常耗服务器性能
第二种,就是dist打的包会偏大
所以,两者综合起来会更好
思路:webpack打包时,当文件体积超过一定程度的时候,进行gzip压缩,生产同名的.gz文件,然后配置nginx,让浏览器请求的时候,如果有.gz文件,返回压缩文件,没有的话,进行实时的压缩
网友评论