普歌-码上鸿鹄 Vue性能优化

vue关于首次加载很慢的优化

CDN

在打包完之后，我发现其中vendor的文件非常的大，大大的影响了加载速度。这个里面，会把node_module里面的包给打进去，最后依赖越多，导致vendor这个文件就越大，我们就会想如何能让依赖还会存在，但是不会打包进vendor文件里面，把依赖放到外部来加载，下面我们来撸它。

这儿我们推荐使用CDN，然后通过webpack来减小vendor的文件大小。

CND(内容分发网络)，是一种公共服务，位于不同的地域，接入不同运营商的服务器，而所谓的cnd实际上就是让cdn作为网站的门面，用户访问到的是cdn服务器，而不是直接访问到网站。由于CDN内部对TCP的优化，对静态资源的缓存，预取，加上用户访问cdn时，会被分配到最近的节点，降低大量延迟，主要的母的就是让大的第三方库到cdn上减少请求。

configureWebpack: config=>{     if(process.env.NODE_ENV=='production'){         return {             externals:{//排除一些引入的模块，不进行打包             'vue':'Vue',                 'iView':'iview',                 'axios':'axios', 'vue-router':'VueRouter', 'echarts':'echarts',             }         }     } } 在这里我们选用的是.min.js体积最小的，然后设置externals选项，配置这个的意思就是告诉webpack，这几个不要给我打包，不然又会打包到vendor里面去了，体积就会变大。

注意：因为在index.html中已经引入就不要在 其他地方引入vue呀axios这些了，如果不删，webpack就会打包进去。

路由懒加载

为什么需要路由懒加载呢？ 如果没有运用webpack打包后的文件将异常的打，当我们进入首页的时候，因为加载的内容过多，时间就会等待的长，会出现长时间的白屏，运用懒加载，可以让我们需要哪个页面的时候，加载来哪个页面，可以有效分担首页的加载压力。

当我们把一个路由对应的组件分割成许多个不同的代码块，然后在需要哪个的时候加载哪个，这样更加高效了。但是在一开始的时候，因为分割成了多个js文件，一起加载的话，速度就会变慢，只是请求一个index.js文件要比请求多个js文件来的更快，一旦打包的index.js文件过大，会影响白屏的时间。

我们通过webpacl根据不同的路由把组件割成不同的代码快，这样按需加载，减少白屏的时间，才是最高效的。

1. vue 异步组件

使用vue-router，使用vue的异步组件技术，可以按需加载。但是这种情况下一个组件生成一个js文件

component: resolve => require([’@/views/Home.vue’],resolve)
component: resolve => require([’@/views/About.vue’],resolve)
2. 组件懒加载 使用import

component: () => import(’…/views/About.vue’)
component: () => import( /* webpackChunkName: “about”*/ ‘…/views/About.vue’)
这种指定了weboackChunkName,会合并打包成一个js文件
3. webpack提供的require.ensure()

vue-router 配置路由,使用weboack的require.ensure技术，也可以实现按需加载.

component: r => require.ensure([],()=>r(require(’@/views/About.vue’)),‘list’)
这种是官方推荐的，按模块划分懒加载
.map文件

当我们在npm run build构建完成之后, 我们查看打包后的文件，会发现有很多的.map文件，占用空间。map文件的作用是绑定编译后的代码调试。

但是我们线上代码已经调试完成之后，就不再需要map文件，留着只会占用空间，关闭map文件的生成，可以提高首屏的加载速度。

productionSourceMap: false
只需要在vue.config.js中导出这句即可，代表着在生产环境下关闭map资源的生成。

gizp压缩

gzip 是一种文件压缩格式，浏览器可以自动解压这种格式，服务器返回的是gzip的格式文件时，response的头部会有Content-Encoding: gzip这样的头部告诉浏览器，我返回的是gzip格式的文件，你要用对应的方法去解压它。

配置gzip压缩，我们有两种方式。

第一种方式是预先将资源压缩成gzip格式，再放入服务器里面。前端使用webpack的插件compression-webpack-plugin来在打包时压缩文件，前端将文件打包成.gz文件，然后通过nginx的配置，让浏览器直接解析.gz文件，大大的提升文件加载的速度。
在webpack的plugins里配置：
new CompressionWebpackPlugin({
filename: ‘[path].gz[query]’, //压缩后的文件名
algorithm: ‘gzip’, //压缩格式 有gzip，brotlicompress
test: /.(js|css|svg)$/, //匹配的是js，css，svg后缀的
threshold: 10240, //只处理比这个值大的资源，按字节算
minRatio: 0.8 //只有压缩率比这个值小的文件才会被处理
// 压缩率 = 压缩大小 / 原始大小，如果压缩后和原始文件大小没有太大的区别，就不用压缩了,
deleteOriginalAssets: false //是否删除原文件，最好不删除，服务器会自动优先返回同名的.gzip资源，如果找不到还可以拿原始文件
})
2 在服务器压缩http请求的目标文件，比如nginx， 在nginx的配置文件里开启下面的配置，当http请求资源的时候，服务器就会将资源压缩传输给浏览器。但是这要消耗cpu资源的。

gzip: on 开启gzip压缩
gzip_static: on 让nigix根据http的请求优先返回 gzip文件
服务端渲染

如果将渲染放到服务器端，会大大提高加载速度.

组件异步加载

加载首页的时候，可以先给首页的子组件设置v-if加载条件。通过computed判断是否加载子组件。

computed: {}
公共代码的抽离 (提升性能没有那么明显)

config.optimization = {
splitChunks: {
cacheGroups: {
vendor: {
chunks: ‘all’,
test: /node_modules/,
name: ‘vendor’,
minChunks: 1,
maxInitialRequests: 5,
minSize: 0,
priority: 100
},
common: {
chunks: ‘all’,
test: /[\/]src[\/]js[\/]/,
name: ‘common’,
minChunks: 2,
maxInitialRequests: 5,
minSize: 0,
priority: 60
},
styles: {
name: ‘styles’,
test: /.(sa|sc|c)ss$/,
chunks: ‘all’,
enforce: true
},
runtimeChunk: {
name: ‘manifest’
}
}
}
}
}
图片的压缩

// 图片压缩设置
chainWebpack: config => {
// 图片打包压缩，使用了 — image-webpack-loader — 插件对图片进行压缩
config.module
.rule(‘images’)
.use(‘image-webpack-loader’)
.loader(‘image-webpack-loader’)
.options({ bypassOnDebug: true })
.end()
}
loading效果

首页加个好看的loading阻塞一下，提高用户体验，可以使用骨架屏。

js文件放在body的后面

默认的情况下，build后的index.html中，js引入是在header中。使用inject的值改为body。

var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
new HtmlWebpackPlugin({
inject: ‘body’,
})
压缩代码并移除console

使用UglifyJsPlugin 插件来压缩代码和移除console。

new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
pure_funcs: [‘console.log’]
},
sourceMap: false
})
第三方按需加载

这个在另一个里面用到了，只用一部分，其余都不同，import打包会整个打包入内，造成空间浪费.

图片转base64

小图片可以转为base64字符串然后潜入img的src中，节省http请求数量，webpack中用url-loader处理，limit控制了图片转base64的阀值。

{
test: /.(png|jpe?g|gif|svg)(?.*)?$/,
loader: ‘url-loader’,
options: {
limit: 10000,
name: utils.asstsPath(‘img/[name].[hash:7].[.ext]’)
}
}