常见首屏优化

减小入口文件体积

路由懒加载
把不同路由对应的组件切割成不同的代码块，路由被请求时会单独打包路由，使入口文件变小，加载速度更快。

函数形式加载路由，可以把各自的路由文件分别打包，只有在解析给定的路由时，才会加载路由组件。

vue-router配置路由时，用动态加载路由方式

router: [
	path :'comA'.
	name: 'comA',
	component: () => import('/.components/comA.vue')
]
1
2
3
4
5

图片资源压缩
使用到的icon可以用在线字体图标，或雪碧图（多个小图标合并到一张图）
小图片用base64

减少请求次数

静态资源缓存
http缓存，强缓存，协商缓存
service worker离线缓存

前端合理利用localStorage

第三方库优化

UI框架按需引入
日常使用的UI框架，不要直接引用整个UI库

import ElementUI from 'element-ui'
Vue.use(ElementUI)
1
2

采用按需加载

import { Button,Input,Pagination,TableColum,MessageBox} from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(pagination)
...
1
2
3
4
5

CDN:插件工具等可选择cdn获取资源

webpack打包

开启gizp压缩。
减小打包体积compression-webpack-plugn

gzip可以压缩到30%。gzip编码是HTTP协议上改进web应用程序性能的技术。web服务器和客户端（浏览器）必须共同支持，使用时需要在服务器上配置。

组件重复打包minChunks。
webpack的config文件中，配置CommonsChunkPlugin

minChunks: 3  //把使用3次及以上的包抽离出来，放进公共依赖文件，避免重复加载组件
1

插件webpack-bundle-analyzer分析包依赖。
知道各个依赖是否用到，之后可以删除掉没有用到的依赖，减少打包工具生成的包大小。

其他

js渲染顺序：无关紧要的js放在后面。

SSR用服务端渲染

边返回边解析：html返回头包含chunk，则边返回边解析。不然一次性返回再解析。需要在服务器配置。