减小入口文件体积
路由懒加载
把不同路由对应的组件切割成不同的代码块,路由被请求时会单独打包路由,使入口文件变小,加载速度更快。
函数形式加载路由,可以把各自的路由文件分别打包,只有在解析给定的路由时,才会加载路由组件。
vue-router配置路由时,用动态加载路由方式
router: [
path :'comA'.
name: 'comA',
component: () => import('/.components/comA.vue')
]
图片资源压缩
使用到的icon可以用在线字体图标,或雪碧图(多个小图标合并到一张图)
小图片用base64
减少请求次数
静态资源缓存
http缓存,强缓存,协商缓存
service worker离线缓存
前端合理利用localStorage
第三方库优化
UI框架按需引入
日常使用的UI框架,不要直接引用整个UI库
import ElementUI from 'element-ui'
Vue.use(ElementUI)
采用按需加载
import { Button,Input,Pagination,TableColum,MessageBox} from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(pagination)
...
CDN:插件工具等可选择cdn获取资源
webpack打包
开启gizp压缩。
减小打包体积compression-webpack-plugn
gzip可以压缩到30%。gzip编码是HTTP协议上改进web应用程序性能的技术。web服务器和客户端(浏览器)必须共同支持,使用时需要在服务器上配置。
组件重复打包minChunks
。
webpack的config文件中,配置CommonsChunkPlugin
minChunks: 3 //把使用3次及以上的包抽离出来,放进公共依赖文件,避免重复加载组件
插件webpack-bundle-analyzer
分析包依赖。
知道各个依赖是否用到,之后可以删除掉没有用到的依赖,减少打包工具生成的包大小。
其他
js渲染顺序:无关紧要的js放在后面。
SSR用服务端渲染
边返回边解析:html返回头包含chunk,则边返回边解析。不然一次性返回再解析。需要在服务器配置。