目录前言为什么要优化？从哪儿开始？现在开始1.代码压缩2.删除部分废弃页面3.使用cdn优化4.修改路由导入方式结果前言“ThispageloadstooslowAlready!”，一个安静的下午被打破，在boss的威逼利诱下和PM，我开始优化这个祖（shi）山项目，因为这个项目到我手上至少用了4-5天。前端换了，很多东西不敢随便删，也找不到负责人。为什么要优化？我们主要看首屏的加载速度。在测试环境下，我们的项目其实运行的还是挺快的，但是生产环境使用的是印尼比较差的服务器。另外，我们需要kexue上网（网络时常波动）。在这个UI2.0上线之后，东西越堆越多，项目也越来越大。毫不夸张的说，我们现在用4G，第一次打开网页，速度超过16秒。根据下表，我们可以推断出客户流失率，但我们在印度尼西亚仍然使用3G网络。可想而知，流失率太可怕了。而且这是一款C端产品，所以更应该考虑体验客户等待页面时间长短的用户流失率。作为开发者，您对首页打开速度的要求有多高？从哪儿开始？观察项目架构后，我推导出以下可行的解决方案：压缩代码打包，取消之前不应该使用的组件和页面，使用CDN引入部分资源，优化路由，修改导入方式这几个优化方案有被一遍又一遍地尝试。真的是效果挺大的，所以发出来给大家看看。现在开始记住这张图中三个比较大的文件大小。我们会看看计划的每一步的效果。1.代码压缩代码压缩是一个非常好的选择。我们首先需要下载一些依赖的css代码压缩(optimize-css-assets-webpack-plugin)下载npminstalloptimize-css-assets-webpack-pluginwebpack.config.jsuseconstOptimizeCSSPlugin=require('optimize-css-assets-webpack-plugin');plugins:[newOptimizeCSSPlugin()]js代码压缩(uglifyjs-webpack-plugin)下载npminstalluglifyjs-webpack-pluginwebpack.config.jsuseconstUglifyJsPlugin=require('uglifyjs-webpack-plugin')plugins:[newUglifyJsPlugin({cache:true,//开启缓存parallel:true,//开启多线程编译sourceMap:true,//是否开启sourceMapuglifyOptions:{//uglify参数comments:false,warnings:false,compress:{unused:true,dead_code:true,collapse_vars:true,reduce_vars:true},output:{comments:false}}),]enablegzipinstallnpminstallcompression-webpack-pluginwebpack.config.js使用constCompressionWebpackPlugin=require('compression-webpack-plugin')plugins:[newCompressionWebpackPlugin({asset:'[path].gz[query]',algorithm:'gzip',test:newRegExp('\\.('+['js','css'].join('|')+')$'),threshold:10240,minRatio:0.8})]nginx配置gzipon;gzip_static开启；gzip_min_length1k;gzip_buffers432k;gzip_http_version1.1;gzip_comp_level2;gzip_typestext/plainapplication/x-javascripttext/cssapplication/xml;gzip_varyon;gzip_disable"MSIE[1-6].";先看看效果吧，我们在第一步2差不多减少了1/2，删除了一些废弃的页面。这个项目之前已经迭代过，前面也提到过，但还是下定决心删掉它们。抓拍了一系列画面后，我找到了一位老员工。与PM确认页面是否已被放弃。这种环境很耗时。以下表格一一确认。删除这些路由后，我重新打包了它们。请看下面，还是有一些作用的，但是没有。达到我预期的效果3.使用cdn开始性能优化我们目前使用的是mintui库，vue系列的全家桶，我们找到对应的cdn，在index中引入引入后？相应的配置不需要打包的资源，所以我们需要在webpack.config.js中写external:{'vue':'Vue','mint-ui':'MINT','axios':'axios','vue-router':'VueRouter','vue-i18n':'VueI18n',},这样这些资源就可以忽略page)算到73了，一般都是用import的写法。项目打包时，会将路由中的所有组件打包到一个js中。项目第一次进入首页时，会加载所有组件，所以首页加载慢component:DetailActivityStatic}]现在老严都用requireexportdefault[{path:"/discover/DetailActivityStatic",component:resolve=>require(['@/components/discover/share/DetailActivityStatic'],resolve)}]这个链接也有点累，因为页面太多，下面是打包后的效果。我们惊奇的发现js确实很小，那么这些内容去哪了呢？向上？我们也没有删除它。在js文件夹中，我们发现了很多单体js。为什么？因为使用require会将组件打包成不同的js，按需加载。这个js只有在访问这个路由的时候才会加载，这样我们就可以避免在进入首页的时候加载过多的内容。至此，我们就完成了优化。来看看效果吧！来看看效果吧！有细心的朋友会发现，这个app.js和vendor.js怎么会比以前变小了呢？因为在压缩代码的第一步我们要进行gzip压缩，所以现在首屏打开基本控制在1-3s左右，比之前的16s好不了多少。PM和老板大喊“这也太快了吧！啊啊啊~”
