最近，用vue-cli 3.0构建了一个小型工单管理系统。完成后，build发现区块供应商的包达到了985kb。加上其他资源文件，首页的总下载量差不多有2 m，测试的第一个反馈就是第一屏慢了慢了！

根据第一屏加载的超大资源文件，进行优化：

1.路由延迟加载

结合Vue的异步组件和webpack的代码划分，可以轻松实现路由的惰性加载。

巴贝尔是在vue-cli 3.0模式下使用的，所以我们需要添加语法-动态-导入插件，让巴贝尔正确解析语法。

//安装插件语法-dynamic-importcnpminstall-save-dev @ babel/plugin-语法-dynamic-import//modify babel . config . js module . exports={ ' preferences ' :[' @ vue/app ']，' plugins ' :[' component '，{ 'libraryName': 'element-ui '，' styleLibraryName ' : ' theme-chake ' }，语法-dynamic-import ']}//修改路由组件(路由器/索引)的加载然后继续优化

2.服务器打开Gzip

Gzip是GNU zip的缩写，顾名思义是一种压缩技术。它压缩服务器上浏览器请求的文件，然后将其传输到浏览器。浏览器解压缩，然后解析页面。服务器启动Gzip支持后，我们的前端需要提供一个资源压缩包。

压缩是通过压缩webpackkplugin插件构建提供的

//安装插件cnpm I-save-dev compression-web pack-plugin//将const compression web pack lugin=require(' compression-web pack-plugin ')添加到vue-config . js；const ProductiongZipExtensions=[' js '，' CSS ']；const is production=process . ENV . NODE _ ENV===' production '；module.exports={.configurewebpack k : config={ if(is production){ config . plugins . push(new compresswebpackkplugin({ algorithm : ' gzip '，test: new RegExp('\)。(' ProductiongZipExtensions . join(' | ')')$ ')，Threshold : 10240，minratio : 0.8})}}现在我们来看看构建后压缩包的大小，大约少了三分之二

3.启用CDN加速

Gzip把文件大小缩小了三分之二，加载速度从之前的2.7秒提升到了现在的1.8秒，但这还是不满足。然后我们分离不太可能被改变的代码或库，继续减少单块供应商，然后通过CDN加载加速资源的加载。

//修改vue.config.js，将不寻常的代码库模块分开，导出={ configure web pack : config={ if(is production){ config . externals={ ' vue ' : ' vue '，' vue-router' :' vue router '，' moment ' : ' moment ' } } }//加载到公共文件夹的index.html！-CND-script src=' http :3359 cdn . bootscs.com/vue/2 . 5 . 17-beta . 0/vue . runtime . min . js '/script script src=' http :3359 cdn . bootscs.com/vue-router/3 . 0 . 1/vue-router . min . js '/script script src=' http 33603359 cdnjs . cloud flare。

CDN优化后。使用jpeg文件交换格式存储的编码图像文件扩展名

可以看到chunk-verdors降低了114kb，通过CDN加载整个文档的速度接近1秒。

4.修改选项以删除控制台，从而减小文件大小

//安装uglifyjs-web pack-pluginpminstall uglifyjs-web pack-plugin-save-dev//修改vue.config.js配置web pack k 3360 config={ if(is production)}.config . plugins . push(new UglifyJsPlugin({ uglifyooptions 3360 { compression : { warnings : false，drop_debugger: true，Drop _ console: true，}，}，sourcemap: false，parallel: true，})})如果记录了代码，则此优化会有一些效果。

摘要

第一屏的优化已经结束。通过以上四个优化，第一屏的加载速度有了很大的提升。如果想进一步优化，还是空间的，比如从代码层面减少代码量(代码复用率)。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。