本文发表于个人网站：http://wintc.top/article/34，转载请注明。 影响网页响应速度的因素很多，例如：http请求过多，服务器本身处理请求时间过长，请求内容过大，JS脚本执行时间过长，以及浏览器回流和重绘等。网站页面的响应速度与用户体验密切相关，直接影响用户是否愿意继续访问您的网站。对于Vue项目，最常见的问题可能就是打包后的文件过大，导致加载时间过长。 我有一个只有三四个页面的小项目，但是因为服务器带宽太小，加载时间长的问题特别明显，所以通过路由懒加载和gzip压缩进行了优化，访问速度得到改善。显着改善。1、路由的懒加载：拆分代码块 Vue支持异步组件，即在使用组件的地方可以使用一个Promise，Promise最终会通过resolve返回一个组件对象。webpack的动态import方法允许将代码打包成块并返回一个Promise（正是异步组件所需要的）。在路由配置表中使用import可以将每个页面组件分成不同的代码块，然后在路由访问时加载相应的组件，避免将所有内容打包在一个chunk中，做到“按需加载”，大大提高响应速度。 没有动态加载路由配置：//router.jsimportVueRouterfrom'vue-router'importVuefrom'vue'Vue.use(VueRouter)importHomefrom'@/pages/Home'importTreefrom'@/pages/Tree'从'@/pages/SearchHighlight'导入SearchHighlight从'@/pages/Watermark'导入Watermark导出默认新VueRouter({routes:[{path:'/',component:Home,children:[{path:'tree',name:'Tree',component:Tree},{path:'search-highlight',name:'SearchHighlight',component:SearchHighlight},{path:'watermark',name:'Watermark',组件：水印}]}]}) 执行yarnbuild（或npmrunbuild）打包，查看dist文件夹下的js和css： 可以看到打包后js和css下有两个文件，其中chunk-vendors文件包含所有页面的js或css文件，大小分别为769K和270K。现在修改路由配置，通过动态加载组件的方式打包，看看打包后的文件是什么样子的。 使用()=>import('xxx')导入组件：[{路径：'/'，组件：（）=>导入（'@/pages/Home'），孩子：[{路径：'树'，名称：'树'，组件：（）=>导入（'@/pages/Tree')},{path:'search-highlight',name:'SearchHighlight',component:()=>import('@/pages/SearchHighlight')},{path:'watermark',名称:'Watermark',component:()=>import('@/pages/Watermark')}]}]})执行yarnbuild（或npmrunbuild）打包，查看dist文件夹下的js和css： js和css文件夹下多了4个chunk-*文件，正好对应我们动态引入的4个组件，这样当我们访问某个页面时，对应chunk-*.js和chunk-*.css。观察文件大小，核心JS文件chunk-venders的大小从769K减少到725K，因为我的4页代码很简单，看起来优化效果不是很大，但是在一个页面很多的大项目中，优化效果会很明显，CSS部分也是如此。二、压缩请求资源1、原理介绍 我们每天使用网盘的时候，上传一个大文件夹肯定很慢。这个时候我们就把它压缩成一个压缩包，下载的时候需要下载的时候解压即可，这样就大大节省了上传下载的时间。同样的原则也可以用于网络请求。当我们向服务器请求资源时，比如js或者css文件，服务器会压缩文件返回给浏览器。解压后浏览器即可使用。 首先，浏览器发送请求时，会通过请求头Accept-Encoding告知服务器，浏览器支持哪些编码格式。打开浏览器的网络，查看当前网页的一个请求的请求头： Accept-Encoding的值表示浏览器支持gzip生成的编码格式或者deflate压缩算法生成的编码格式，即告诉服务器如果可以，也可以用这两种方法把请求的资源压缩给我。Accept-Encoding也可能有一个默认的compress压缩格式和身份解压格式。 如果服务端对资源进行压缩编码，会通过响应头Content-Encoding告知当前请求使用什么编码格式。当然，如果服务端不这样做，就不会返回这个响应头，比如一个请求使用gzip压缩返回的内容：2.服务端配置 一般我们部署到服务端的时候，会使用nginx作为代理服务器，所有的请求都会通过nginx进行转发。这里演示nginx配置gzip压缩文件然后返回。配置前先看一下网上公布的示例工程的请求状态： 可以看到之前生成的chunk-vendors文件，大小725K，请求时??间7.10秒，下载时间7.05秒，这太慢了。配置nginx，开启gzip:server{gzipon;gzip_typestext/plainapplication/javascriptapplication/x-javascripttext/javascripttext/xmltext/css;} 这个配置函数是，当nginx服务器返回gzip_types中的列时导出内容类型，首先使用gzip来compress（当然前提是请求者支持gzip），执行sudonginx-sreload使配置生效，刷新刚才的页面看看效果： 同样的请求，大小请求内容变成216K，下载时间直接缩短到1s多，效果显着！nginx还有其他的gzip配置项，比如gzip_comp_level可以用来控制压缩率（当然更高的压缩率可能意味着更大的服务器消耗），有兴趣的同学可以查看nginx的文档。3、webpack打包时直接使用gzip压缩 上一步在请求服务端时，返回的内容是使用gzip压缩的。当出现这样的问题时，对于同一个资源的不同请求，反复压缩无疑会增加服务器的CPU和内存消耗。如果你使用webpack，你可以直接使用compression-webpack-plugin插件压缩我们的代码。首先安装compression-webpack-plugintodevdependencies://yarninstallationyarnaddcompression-webpack-plugin-D//或者npmnpminstallcompression-webpack-plugin--save-dev 简单配置，更多配置可以学习官方文档：compression-webpack-plugin:constCompressionPlugin=require('compression-webpack-plugin')module.exports={//...configureWebpack:{plugins:[newCompressionPlugin({test:/\.(js|css)?$/i,//哪些文件需要压缩filename:'[path].gz[query]', //压缩文件名算法：'gzip', //使用gzip压缩minRatio:1, //只有压缩比小于1才会压缩deleteOriginalAssets:true//删除未压缩的文件，慎重设置，如果要提供非gzip资源可以不设置或者设置为false})]}} 打包看看dist下的js和css文件夹。现在文件被压缩成.gz： 压缩后chunk-vendors只有176K，比原来的725K压缩了近80%。图片、字体等也可以通过这种方式进行压缩，只要修改测试配置项的正则表达式匹配此类文件即可。但是现在，你需要在nginx服务器上配置静态压缩：server{gzipon;gzip_types文本/纯应??用程序/javascript应用程序/x-javascript文本/javascript文本/xml文本/css；gzip_staticon;} gzip_static设置为on后，访问资源时，如果有“资源路径.gz”文件，则直接返回该文件，优先级高于动态gzip。现在访问页面： 将鼠标悬停在chunk-vendors的大小上，可以看到提示“176KBtransferredovernetwork,resourcesize:724K”。如果你的项目需要的资源文件太大，可以试试gzip等压缩方式，相信会有立竿见影的效果。
