在Vue项目中，引进到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开端显现首屏。若是引进的库许多，那么vendor.js文件体积将会相当的M f G ; ! 6 i ^ f大，影响首屏的体会。能够看个例子：

这是优化前的页面加载状况：履行npm run build打包项目，出来的vendeor.js文件，根本都是1M以上的的巨大文件，没有用户能忍受5s以上的loading而不封闭页面的，如图所示：

Vue首屏加载速度优化，提升80%以上

当项目在挂载到服务器上，均匀都是10S以上加载出来，好家伙这{ f H – U v Z %加载时间，仿佛过了半个世纪，很烦人，心态boom, 开发L d ] _ o者乃至都有种想砸@ [ n / | )电脑的激动（#*@#￥……&*）！

我们先来剖析下前端加载速度慢原因

1. 首要装置webpack的可视化资源剖析东西，命令行履行：

npm i webpack-bundle-analyzer -D

2: B [ n Q ( 7 S 4. 然后在webpack的dev开发形式装备中，引进插件，代码如下：

const BundleAnalyzerPlugin = require('webpack-bundle-plugin').BundleAnalyzerPlugin
plugins: [
new BundleAnalyzerPlugin()
]

3. 最后命令行履行npm run build --repon k 3 ` : a W 1rt, 浏览器会主动翻开剖析结^ ( p 5 M H K果，如下所示：

Vue首屏加载速度优化，提升80%以上

能够看到vue全家桶相关依靠占用了很大的空间，对webpack的构建速度和网站b t i ^加载速度都会有比较大的影响。单页运用会A . 4 S o e跟着项目越大，导致首屏加载速度很慢，针对目前所露出出来的问题，有以下几种优化计划能够参考：

有针对性的优化计划

一、关于第三方js库e z D的优化K 4 *，别离N d n Q打包

出产环境是内网的话，就把资源放内网，经过静态文件引进，会比node_modules和外网CDN的打包加载快许多。假如( o $ ]有外网的话，能够经过CDN方法引进，因为不必占用拜访外网的带[ ` ( ) l % d宽，不仅能够为您节省a u i F 6 y W u流量，还能经过CDN加速，获得更快的拜访速度。可是要注意下，假如你引用的CDN 资源存在于第三方服务T N h l 5 ? ^ @ C器，在安全性上并不完全可控。

目前选用引进依靠包出产环境的js文件方法加载，直接经过window能够拜访露出出的全局变量，不必经过import引进，Vue.use去注册

在webpack的dev开发装备文件中, 加入如下参数，能够别离打包第三方资源包，ke9 * b x a = O c Vy为依靠包称号，value是源码抛出来的全局变量。如下图所示，能够看到打包后vue相关资源包已经排除在外了。关于一些其他的东西库，尽量选用按需引进的方法。

externaJ h b / I c W  Gls: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
'element-ui': 'ELEMENT'
}

Vue首屏加载速度优化，提升80%以上

二、vue-roe r % u M H 1uter运用懒加载

在拜访到当前页面才会加载相关的资源，异步方法分模块加载文件，默许的文件名是随机的id。假如在output中装备了chunkf 3 N %Filename，能够在component中添加WebpackChunkName，是为了方便调试，在页面加载时候，会显现加载的对应文件名+hash值，如下图：

{
path: '/Login',
name: 'LO X yogin',
component: () = >import( /* webpackChunkName: "Login" */  '@/view/Logix { # & y tn')
}

Vue首屏加载速度优化，提升80%以上

三、图片资源的紧缩，icon资源运用雪碧图

严格说来这一步不算在编码技术范围内，可是却对页面的加载速度影响很大。关于所有的图片文件，都能够在一个6 * x M ( I叫tinypng的网站上去紧缩一下。网址：tinypng.com/，对页面上运用到的icon，能够运用在线字体图; E j Q ; ? 2 Q 9标，或者雪碧图，将许多小图标合并到同一张图上，用以减轻http恳求压力。A } u然后经# 1 o过操作CSS的background属性，操控背景的方位以及巨细，来展示需要的部分。

四、敞开gizp紧缩

gizp紧缩是一种http恳求优化方法，经过削减文件体积来进步加载速度。html、js、css文件乃至json数u z / 9据都能够用它紧缩，能够减小60%以上的体积。前端装备gzip紧缩，并且l * 6 /服务端运用nginx敞开gzip，用来减小网络传输的流G – K量巨细。

命令行履行：npm i compression-webpack-plugin -D

在weR t d Bbpack的dev开发装备文件中加入如下代码:

const CompressionWebpackPlugin = require('compression-webpack-plugin')
plugins: [
new CompressionWebpackPlugin()
]

启用gzip紧缩打包之后，会变成下面这样，主动生成gz包。目前大部分干流浏览器客户端都是支撑gzip的，就算小部分非干流浏览器不支撑也不必担心，不支撑gzip格式文件的会默许拜访源文件的，所以不要装备清除源文件。

Vue首屏加载速度优化，提升80%以上

装备好之后，翻开浏览器拜访线上，F12查看操控台，假如该文件资源的响应头里显现有Conten+ c I 6t-E= 6 , r u h e P /ncoding: gzip，表明$ J k浏览器支撑并且启用了Gzip紧缩的资源

Vue首屏加载速度优化，提升80%以上

五、webpack相关装备优化

（1= 2 h 9 L @）运用uglifyjs-webpack-= 4 d iplugin插件代替webpack自带UglifyJsPlugin插件来紧缩JS文件；出产环境封闭源码映射，一方面能削减代码* m . d Z包的巨细，另一方面也有利于体系代码安全；清除打印日志o [ 和debugger信息；装备SplitChunks 抽取公l 6 +有代码，提高你的运用的t = { s 6性能

（2）运用mini-xs5 j U g l ls-extract-plugin提取CSS 到独自的文件, 并运用optimize-css-assets-w] x G F . v &ebpack-plu* M I ^gin来紧缩CS} B V ` q dS文件 。

注：具体相关webpack装备请点击juejin.im/post/5d2070…查看第一篇webpack文章，注释很详细哟。

六+ , ,、前端页面代码层面的优化

（1）合理运用v-if和v-show

（2）合理运用watch和computed

（3）运用v-for有必要添加key, 最好为仅有id, 防止运用index, 且在同一个标签上，v-for不要和v-if一起运用

（4）定时器的毁掉。能够在beforeDestroy()生命周期内履行毁掉事情；也能够运用d h Z P ` # A & –$once这个事情侦听器，在界说定时器事情的方位来清除定时器。详细见vue官网

终究优化后的作用如下图：vY B 6 G E l .endor.js文件从1M以上优化x V $ T V x /到256K左右，体积削减挨近80%，排除服务器影响的因素，界面渲染速度根本都在1s左右，达到秒开作用，比之前快

了太多，体会一下就上来了嘻嘻。

Vue首屏加载速度优化，提升80%以上

结语：前端性能优化至关重要，以后有遇到更好的其5 O 1 a b 他计划会继续补充进来。你也能够在谈论区留言讨论，有过错不足的当地欢迎大佬指出。