vue优化总结
一、vue页面优化
1、路由懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 官方地址
component: () => import('@/views/')
2、组件懒加载
const name=()=>import('@/XX.vue');
3、图片懒加载
也就是图片按需加载（产生原因：图片的加载是同步的，若图片数据过大，加载时会阻塞浏览器继续向下解析，用户体验非常差。）
//1.CDN引用vue-lazyload
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
//2.main.js中
Vue.use(VueLazyload)
//说明：若页面出现图片抖动的情况，则需设置默认图片(loading) ,加载错误的图片（error）
Vue.use(VueLazyload,{
error: require('./assets/img/XX.png'),
loading: require('./assets/img/XX.png')
});
//3.page中使用
<img style="width: 100%;height: 100%;" v-lazy="imgmtbd">
data:imgmtbd:require('../assets/img/imgmtbd.png')
4、V-IF和V-SHOW的区别使用
v-if：原理是判断是否加载，减轻服务器的压力，但是若频繁切换时，加载的开销更大。
v-show：原理是调整DOM元素的CSS的dispaly属性，使客户端操作更加流畅，但有更高的初始渲染开销。
用法：需要频繁切换–>强烈推荐v-show ，否则推荐使用v-if ；
5、禁用行内样式
6、提取公共代码
（1）方法：路由跳转、公共请求、请求同一个接口、过滤器、正则表达式、公共调用插件的相关方法等等
（2）组件：轮播图、区域选择、分页、时间弹窗、二维码分享弹窗、新闻列表栏目、公共模块等等
（3）插件：缓存管理采用vuex，刷新缓存失效时采用vuex-persistedstate
7、npm包改成cdn引用
注意：官网中提供的cdn不太稳定，建议下载下来放置到公司提供的cdn上面
//index.html
<script src="https://download.yxybb.com/project/MZ/resource/sweetalert.min.js"></script>
//vue页面使用
swal("确定",buttons:{确定});
8、computed和watch区分
computed：
1、支持缓存，只有依赖数据发生改变，才会重新进行计算；
2、不支持异步，当computed内有异步操作时无效，无法监听数据的变化；
使用场景：分页中需要实时展示几栏分页数据；
watch：
1、不支持缓存，数据变，直接会触发相应的操作；
2、watch支持异步；
3、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
使用场景：监听路由变化；
9、v-for避免同时使用v-if
v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成 computed 属性
使用filter，v-for="el in modularName.filter(obj=>{})"
若只使用一次可用computed
10、减少页面接口请求个数
一般web网页会有多个请求，阔以相应减少请求个数，减少页面加载时间
11、减少data中非必要参数个数
一些公共的参数阔以在app.vue中定义，采用vue挂载到window下面
data:function(){
return{
routeDefine:''//公共动态参数
}
}，
initConfig() {
window.Vue = this;//将vue挂载到window下面
},
created(){
this.routeDefine=this.$route.params.define;
}
12、第三方插件按需引入
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'; //按需引入
import 'swiper/css/swiper.css'
export default {
components: {
Swiper,
SwiperSlide
},
directives: {
swiper: directive
}
}
13、v-for中，设置唯一key值
加快页面加载速度
14、首屏加载慢，优先引入骨架屏
二、webpack优化
1、GZIP压缩 （vue-^2.5.2; webpack-^3.6.0)
一般打包后的资源文件请求都会保持原本大小，如果文件过大，并且很多的情况下，会导致网络请求耗时，严重点可能阻塞后面的进程。
为解决这种情况，打包的时候通过webpack配置生成对应的 .gz 文件，浏览器请求xx.js/css等文件时，服务器返回对应的xxx.js.gz文件；
//1.安装依赖compression-webpack-plugin （若安装失败，需更换低版本）
npm install --save-dev compression-webpack-plugin@1.1.2
//2.webpack.prod.conf.js中
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',// 压缩后的文件名(保持原文件名，后缀加.gz)
algorithm: 'gzip',//压缩算法/功能
test: new RegExp(//匹配文件名
/\.js$|\.html$|\.css$/ // '\\.(' +config.build.productionGzipExtensions.join('|') +')$'
),
threshold: 10240,//对超过10k的数据压缩
// deleteOriginalAssets:true,// 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，默认为false（也就是删除打包后的gz后还可以加载到原始资源文件）
minRatio: 0.8//压缩率小于0.8才会压缩
})
)
}
//3.nginx 服务端修改http配置：
http:{
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg
image/gif image/png;
}
2、webpack压缩图片
压缩命令：cnpm install image-webpack-loader --save-dev
相关配置地址
官网地址
3、优化webpack打包
（1）剥离node_modules
因构建过程中，将node_modules中的内容打进来了，导致构建后的包特别大，因此剥离node_modules，以此来减少webpack打包时间
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{// 对src和test文件夹下的.js文件使用babel-loader将es6+的代码转成es5
test: /\.js$/,
loader: 'babel-loader?cacheDirectory=true', // 通过设置cacheDirectory缓存loader执行结果，提升打包速度
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
exclude: /node_modules/, // 不去查找的文件夹路径，node_modules下的代码是编译过得，没必要再去处理一遍
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|jpg|gif|svg|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1000 * 100
}
}
]
},
{
test: /\.less$/,
use: [
"style-loader", // creates style nodes from JS strings
'css-loader', // translates CSS into CommonJS
'less-loader', // compiles Less to CSS
]
},
]
}
（2）剥离js与css，less文件
暂未测试，因本项目的css也没有几多，有谁测试了可以告诉我一下。此处是引入了大佬优化方案；
webpack4.X版本已经使用最新API mini-css-extract-plugin ，原来的extract-text-webpack-plugin在node版本为10.X以后已经失效了。
//引入plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
//配置loader
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
// 'style-loader',// 与 MiniCssExtractPlugin.loader 冲突
'css-loader'
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
// "style-loader", // creates style nodes from JS strings
'css-loader', // translates CSS into CommonJS
'less-loader', // compiles Less to CSS
]
},
//配置plugin
/**
* 剥离CSS文件
*/
new MiniCssExtractPlugin({
filename: "[name].[chunkhash:8].css",
chunkFilename: "[id].css"
}),
/**
* 动态引入css，less，js等文件
*/
new HtmlWebpackPlugin({
title: 'webpack',
template: './index.html'
}),
（3）分离第三方类库 DllPlugin 和 DllReferencePlugin
因所有的插件全部合成一个js，导致页面加载太慢了，然后只能把第三方插件拆分出来，也提升了构建速度；
相关配置地址
三、数据安全性
1、web端防复制或者右键
document.oncontextmenu=new Function("event.returnValue=false");
document.onselectstart=new Function("event.returnValue=false");
2、去除debugger、console.log、注释等
//1、安装插件： (注意： 要求至少需要版本---> Node v6.9.0 和 Webpack v4.0.0 )
npm install uglifyjs-webpack-plugin
//2、代码块
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//plugins中
new UglifyJsPlugin({//压缩html和css代码
uglifyOptions: {
output:{
comments:false//删除注释
},
compress: {
warnings: false,//去除警告
drop_debugger:true,//删除debugger
drop_console: true,//console
pure_funcs: ['console.log']//移除console.log，防止可能造成的内存泄漏
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
参考来源：
vue中v-if与v-show的区别以及使用场景.
Vue中computed和watch的区别.
Vue中computed和watch的区别.
Webpack打包效率优化篇.
扫一扫
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
