We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容;
1、减小入口文件积 2、利用prerender-spa-plugin预渲染 3、SSR
常用的手段是路由懒加载,把不同路由对应的组件分割成不同的代码块,待路由被请求的时候会单独打包路由,使得入口文件变小,加载速度大大增加。 在vue-router配置路由的时候,采用动态加载路由的形式
vue-router
routes:[ path: 'Blogs', name: 'ShowBlogs', component: () => import('./components/ShowBlogs.vue') ]
以函数的形式加载路由,这样就可以把各自的路由文件分别打包,只有在解析给定的路由时,才会加载路由组件。
静态资源本地缓存 1、后端返回资源问题:
HTTP
Cache-Control
Last-Modified
Etag
Service Worker
2、前端合理利用localStorage
localStorage
UI框架按需加载
在日常使用UI框架,例如element-UI、或者antd,我们经常性直接引用整个UI库
element-UI
antd
import ElementUI from 'element-ui' Vue.use(ElementUI)
但实际上我用到的组件只有按钮,分页,表格,输入与警告 所以我们要按需引用
import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui'; Vue.use(Button) Vue.use(Input) Vue.use(Pagination)
对页面上使用到的icon,可以使用在线字体图标,或者雪碧图,将众多小图标合并到同一张图上,用以减轻http请求压力。
icon
http
假设A.js文件是一个常用的库,现在有多个路由使用了A.js文件,这就造成了重复下载。 解决方案:在webpack的config文件中,修改CommonsChunkPlugin的配置。
A.js
webpack
config
CommonsChunkPlugin
minChunks: 3
minChunks为3表示会把使用3次及以上的包抽离出来,放进公共依赖文件,避免了重复加载组件。
minChunks
拆完包之后,我们再用gzip做一下压缩 安装compression-webpack-plugin
gzip
compression-webpack-plugin
cnmp i compression-webpack-plugin -D
在vue.congig.js中引入并修改webpack配置
vue.congig.js
const CompressionPlugin = require('compression-webpack-plugin') configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... config.mode = 'production' return { plugins: [new CompressionPlugin({ test: /\.js$|\.html$|\.css/, //匹配文件名 threshold: 10240, //对超过10k的数据进行压缩 deleteOriginalAssets: false //是否删除原文件 })] } } }
在服务器我们也要做相应的配置 如果发送请求的浏览器支持gzip,就发送给它gzip格式的文件 我的服务器是用express框架搭建的 只要安装一下compression就能使用
express
compression
const compression = require('compression') app.use(compression()) // 在其他中间件使用之前调用
SSR(Server side),也就是服务端渲染,组件或页面通过服务器生成html字符串,再发送到浏览器。从头搭建一个服务端渲染是很复杂的,vue应用建议使用Nuxt.js实现服务端渲染
SSR(Server side)
html
vue
Nuxt.js
The text was updated successfully, but these errors were encountered:
No branches or pull requests
SPA 优缺点
优点
缺点
SPA首屏加载速度慢解决办法
首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间,此时整个网页不一定要全部渲染完成,但需要展示当前视窗需要的内容;
加载慢的原因
常见的几种SPA首屏优化方式
1、减小入口文件积
2、利用prerender-spa-plugin预渲染
3、SSR
常用的手段是路由懒加载,把不同路由对应的组件分割成不同的代码块,待路由被请求的时候会单独打包路由,使得入口文件变小,加载速度大大增加。
在
vue-router
配置路由的时候,采用动态加载路由的形式以函数的形式加载路由,这样就可以把各自的路由文件分别打包,只有在解析给定的路由时,才会加载路由组件。
静态资源本地缓存
1、后端返回资源问题:
HTTP
缓存,设置Cache-Control
,Last-Modified
,Etag
等响应头Service Worker
离线缓存2、前端合理利用
localStorage
UI框架按需加载
在日常使用UI框架,例如
element-UI
、或者antd
,我们经常性直接引用整个UI库但实际上我用到的组件只有按钮,分页,表格,输入与警告 所以我们要按需引用
对页面上使用到的
icon
,可以使用在线字体图标,或者雪碧图,将众多小图标合并到同一张图上,用以减轻http
请求压力。假设
A.js
文件是一个常用的库,现在有多个路由使用了A.js
文件,这就造成了重复下载。解决方案:在
webpack
的config
文件中,修改CommonsChunkPlugin
的配置。minChunks
为3表示会把使用3次及以上的包抽离出来,放进公共依赖文件,避免了重复加载组件。拆完包之后,我们再用
gzip
做一下压缩 安装compression-webpack-plugin
在
vue.congig.js
中引入并修改webpack
配置在服务器我们也要做相应的配置 如果发送请求的浏览器支持
gzip
,就发送给它gzip
格式的文件 我的服务器是用express
框架搭建的 只要安装一下compression
就能使用SSR(Server side)
,也就是服务端渲染,组件或页面通过服务器生成html
字符串,再发送到浏览器。从头搭建一个服务端渲染是很复杂的,vue
应用建议使用Nuxt.js
实现服务端渲染参考文献
The text was updated successfully, but these errors were encountered: