TienChin项目也是一个前后端分离的项目。前后端分离的项目如果做成SPA（单页）的形式，必然会面临加载首屏的问题，因为默认的首页文件比较大，可能会超过1MB，进而带来首页加载缓慢的问题。所以我们需要通过优化来提高首页的加载速度。总的来说，解决问题的思路有几种：UI组件按需加载、路由懒加载组件重复gzip打包，在这些加载方式中，UI组件按需加载和gzip是两种常用的解决方案，而另外两种优化方法需要结合具体项目看是否满足相关条件。那么，在这篇文章中，宋哥就先和大家聊一聊UI组件的懒加载和gzip。1.ElementUI按需加载1.1问题重现，没有做任何优化。我们一般在main.js中导入ElementUI是这样的：importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI,{size:'small'});css不用多说，必须引入。但是按照上面的引入方式，除了css，其他的组件都已经引入到项目中了。最新版的ElementUI有将近60个组件，但是我们项目中用到的组件可能没有那么多，这些终归是没用的。以上组件会造成资源的浪费。在不做任何优化的情况下，我们使用如下命令为项目生成report.html，帮助我们分析包内容：vue-cli-servicebuild--report该命令的执行日志如下（截取关键部分）:warningentrypointsizelimit:以下入口点组合资产大小超过建议的限制(244KiB)。这会影响网络性能。入口点：app(1.17MiB)css/chunk-vendors.9948ce82.cssjs/chunk-vendors.11959501.jscss/app.4e8a7623.cssjs/app.ce6f575c.js文件大小Gzippeddist/js/chunk-vendors.11959501.js840.77KiB227.94KiBdist/js/app.ce6f575c.js99.08KiB30.95KiBdist/js/chunk-64435448.d0a0516e.js26.52KiB5.87KiBdist/a6.75-0c157c.js.js23.79KiB5.49KiBdist/js/chunk-a3fdbb9c.ddc4c008.js13.30KiB47k-cjs/distb5/js2882c4cd.js10.40KiB2.95KiBdist/js/chunk-4e552d82.c64f41t.7.jsKiB0/d108.js/块k-18458ebc.32fb57c9.js1.54KiB0.62KiBdist/js/chunk-2d0d03c8.3a093d55.js0.52KiB0.36KiBdist/js/chunk-2d237c54.0b312051.js0.43KiBv8ors-2d0d03c8.3a093d55.js.css258.19KiB41.36KiBdist/css/app.4e8a7623.css3.46KiB1.09KiBdist/css/chunk-0c17a57a.9fe19f94.css0.86KiB0.35KiBdist/css/chunk-64435448.3755e146.css0.30KiB从0.15KiB在这部分，可以看到项目入口文件的大小超过了官方推荐的244KB，这可能会影响网页的性能。这个时候我们把打包好的文件拷贝到SpringBoot的resources/static目录下，启动后台。项目，让我们看看浏览器的加载状态：可以看到最大的chunk-vendors.11959501.js文件加载耗时369ms。同时大家注意到，此时前端dist目录下有一个名为report.html的文件，就是生成的打包报表。我们在浏览器中打开这个页面，如下：在这个html页面中，通过可视化页面展示给我们看到底是谁展开了这个js文件，从图中我们可以看出chunk-vendors.11959501.js文件比较大是因为里面的element-ui.commons.js文件比较大。其实每个模块都可以优化，但是首先要做的是因为element-ui.commons.js太大了，所以先优化一下。1.2问题求解的优化方法其实很简单。ElementUI官网也给出了方法。首先我们加载安装babel-plugin-component：npminstallbabel-plugin-component-D然后修改babel.config.js文件，如下：module.exports={presets:['@vue/app',['@babel/preset-env',{modules:false}]],插件:[["component",{"libraryName":"element-ui","styleLibraryName":"theme-chalk"}]]}配置完成后，修改main.js文件，将我们需要的组件一一引入：徽章、加载、消息、消息框、菜单、选项卡、TabPane、面包屑、面包屑项、下拉列表、步骤、工具提示、弹出框、折叠、FormItem、复选框、页眉、DropdownMenu、DropdownItem、旁白、主要、MenuItem、子菜单、选项、Col、行，上传，Radio,DatePicker,RadioGroup,CollapseItem,Switch}来自'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.prototype.$ELEMENT={size:'small',zIndex:3000};Vue.use(Switch);Vue.use(CollapseItem);Vue.use(Radio);Vue.use(RadioGroup);Vue.use(DatePicker);Vue.use(Upload);Vue.use(Row);Vue.use(Col);Vue.use(Option);Vue.use(子菜单);Vue.use(MenuItem);Vue.use(Header);Vue.use(DropdownMenu);Vue.use(DropdownItem);Vue.use(Aside);Vue.use(Main);Vue.use(Checkbox);Vue.use(FormItem);Vue.use(Collapse);Vue.use(Popover);Vue.use(Menu);Vue.use(Tabs);Vue.use(TabPane);Vue.use(Breadcrumb);Vue.use(BreadcrumbItem);Vue.use(Dropdown);Vue.use(Steps);Vue.use(Tooltip);Vue.use(Tree);Vue.use(Pagination);Vue.use(Badge);Vue.use(Loading);Vue.use(Button);Vue.use(Input);Vue.use(Table);Vue。use(TableColumn);Vue.use(Dialog);Vue.use(Card);Vue.use(Container);Vue.use(Icon);Vue.use(Select);Vue.use(Form);Vue.use(标签);Vue.prototype.$alert=MessageBox.alertVue.prototype.$confirm=MessageBox.confirm这里的代码并不难。有两点需要注意：MessageBox的引入方式不同于其他组件，需要注意组件统一自定义size和zIndex方式的变化。配置完成后，我们再次执行vue-cli-servicebuild--report查看打包结果：entrypointsizelimit:Thefollowingentrypoint(s)combinedassetsizeexceedstherecommendedlimit(244KiB).这会影响网络性能。入口点：应用程序(1.03MiB)css/chunk-vendors.26d2c5b9.cssjs/chunk-vendors.e2a11728.jscss/app.4e8a7623.cssjs/app.c5dd78e5.js文件大小Gzippeddist/js/chunk-vendors.e2a11728.js683.05KiB177.91KiBdist/js/app.c5dd78e5.js101.70KiB31.90KiBdist/js/chunk-64435448.d0a0516e.js26.52KiB5.87KiBdist-35.037dist/65cunk/js.js23.79KiB5.49KiBdist/js/chunk-33b8cd94.7bbae1a0.js13.30KiB3.46KiBdist/js/chunk-df7e035a.414b548f.js10.40KiB2.95KiBdist/js/chunk-4e552d82si1.c64f18458ebc.32fb57c9.js1.54KiB0.62KiBdist/js/chunk-2d0d03c8.3a093d55.js0.52KiB0.36KiBdist/js/chunk-2d237c54.0b312051.js0.43KiB0.33KiBdist/css/chunk-vendors.26d2c5b9.css262.app71KiBist/KiB.4e8a7623.css3.46KiB1.09KiBdist/css/chunk-0c17a57a.9fe19f94.css0.86KiB0.35KiBdist/css/chunk-64435448.3755e146.css0.30KiB0.15KiB最后和前面的Elementlog对比后发现有还是有效果的，只是效果不明显。这时候我们打开report.html页面看看：可以看到大的element-ui.commons.js已经消失了，取而代之的是一组小的。你好。相关文件的大小也减少了大约150kb。这感觉很有限。2.gzip那么，在前面代码的基础上，我们继续通过gzip进行压缩。要通过gzip压缩，我们有两个想法。这两个思路和前后端分离两种不同的部署方式有关。前端编译打包后，复制到后端，单独部署后端项目，可以直接部署前端。前端通过Nginx部署（推荐）2.1服务端配置如果使用第一种方式，前端不需要做额外的工作，也不需要编译beforeafter文件。我们在后端application.yml中添加如下配置开启gzip压缩：server:compression:enabled:true配置完成后，重启后端项目，访问项目主页，如下，可以看到文件基本压缩完成：点击Openarequest，可以看到gzip已经生效：2.2前端配置Nginx前端gzip压缩配置有两种方式：Nginx动态压缩，静态文件或者普通文件，请求来的时候压缩，然后返回给前端。Nginx静态压缩，提前将文件压缩成.gz格式，请求来的时候直接返回。2.2.1Nginx动态压缩动态压缩Vue还是使用普通的打包编译文件，将前端编译打包文件复制到Nginx的html目录下，然后访问nginx：http://192.168.91.129，保证nginx运行成功，然后配置nginx：gzipon；#开启gzipgzip_min_length2k;#压缩超过2kbgzip_disablemsie6;#ie6不适用gzipgzip_typestext/cssapplication/javascripttext/javascriptimage/jpegimage/pngimage/gif;#Required处理文件配置完成后，重启Nginx：./nginx-sreload启动成功后，再次进入前端页面查看压缩效果。2.2.2Nginx静态压缩上面的动态压缩有个问题，就是每次响应一个请求都需要压缩。其实都是一样的文件，老是压缩有点浪费资源。我们可以提前把文件压缩好，保存在服务器上，需要的时候直接返回，这样会方便很多。这就需要我们先在前端安装压缩插件：npminstallcompression-webpack-plugin-D安装成功后，在vue.config.js中配置：constCompressionPlugin=require("compression-webpack-plugin")module.exports={devServer:{host:'localhost',port:8080,proxy:proxyObj},configureWebpack:config=>{if(process.env.NODE_ENV==='production'){return{plugins:[newCompressionPlugin({test:/\.js$|\.html$|\.css/,threshold:1024,deleteOriginalAssets:false})]}}}}threshold表示超过1kb的文件将被压缩。deleteOriginalAssets表示压缩后是否删除原文件。配置完成后，再次执行打包命令vue-cli-servicebuild。这次打包完成后，我们可以在js目录下看到.gz文件，如下：接下来将文件上传到Nginx服务器，然后重新编译打包Nginx。如果想让Nginx返回压缩文件，需要使用Nginx中的http_gzip_static_module模块。该模块可以发送预压缩文件，扩展名为.gz，所以我们需要重新编译打包Nginx：在;注意，启用gzip_static后，gzip_types会失效，所以不需要配置这个属性。配置完成后，重启Nginx，再次访问，查看浏览器日志，会发现gzip已经生效。”注：“静态压缩返回的gzip压缩文件都是提前准备好的。如果没有.gz格式的文件，它会自动返回到原始文件。这是一种不同于动态压缩的响应策略。动态压缩是根据Nginx中的配置进行的，超过配置的大小会自动压缩。嗯，经过这波操作，首屏加载速度提升了5倍左右。
