前言常规vue项目打包访问后，返回一个只包含div的html，其他内容块由js动态生成。有两个比较大的问题：不利于SEO，首屏加载慢，用户体验不好。在服务器端将vue组件渲染成组装好的HTML字符串，然后直接发送给浏览器，最后需要在客户端将这些静态标记混合在一个完全交互的应用程序中。使用ssr重新部署构建项目后：可以看到返回的内容已经包含了首屏内容的html代码块，完美！~.~极速传送门：基于vue-cli4.0的小demo+Typescript+SSR按需导入使用es6模块进行按需导入1.在路由文件中按需引入组件#router.index.tsexportfunctioncreateRouter(){returnnewRouter({mode:'history',routes:[{path:'/',name:'Home',component:()=>import(/*webpackChunkName:"Home"*/'./views/Home.vue'),},{path:'/about',name:'About',component:()=>import(/*webpackChunkName:"about"*/'./views/About.vue'),},],});}2.静态库按需导入模块，不全如element-ui库中，我只想使用按钮组件：import{button}from'element-ui';请求优化1.css、js放置顺序css文件放在header，js文件放在body之前，但是vue已经帮我们处理好了2.使用字体图标，图标资源使用sprite。我们知道HTTP需要3次握手才能建立连接。请求过多会影响加载速度。尽量减少不必要的静态资源，比如页面上的icon图标，腾讯官网的一张图片如下：直接导入一张完成的图片，根据background-position设置图片的位置推荐一个制作sprite的网站图片：CSSSpritesGeneratorCDN加速CDN（ContentDeliveryNetwork），即内容分发网络，构建在现有网络基础上的智能虚拟网络，依托部署在各地的边缘服务器，通过中心的负载均衡平台均衡、内容分发、调度等功能模块使用户就近获取所需内容，减少网络拥塞，提高用户访问响应速度和命中率。静态资源上传到CDN，可以大大提高访问速度。NoCDN:UseCDN:可以看到使用CDN后，下载速度有很大提升静态资源压缩，开启GZIP压缩对css、js、图片等资源进行压缩，服务器开启GZIP压缩。可以看出，压缩后，1.7M的源文件变成了285kb，体积大大缩??小。对entrychunk进行了优化，将entrychunk文件拆分出来，分离一些静态库，既可以加快打包速度，又可以优化加载。如下，分离出一些静态库：vuejs、axios、vuex等，可以看到浏览器会开启多个下载线程进行下载。如果不分离这些静态库，入口chunk会非常庞大??，加载速度可想而知~.~分离出一个element-ui库，我们不关心dev环境。我们只需要在prod环境中分离出来即可。我们只需要在vue打包配置中动一下就行了。只需删除这个库：#vue.config.jsconfigureWebpack:{externals:process.env.NODE_ENV==='production'?{'element-ui':'element-ui',}:undefined,},#索引。html手动导入静态资源我的博客END
