1.静态资源的压缩和合并
(1) 打包时对文件进行压缩 config/index.js文件 productionGzip: true,
(2) css压缩:1.无效代码删除 2.css语义合并
(3) js压缩于混乱: 1.无效字符的删除 2.剔除注释 3.代码语义的缩减和优化
2.静态资源缓存(通过连接名称控制缓存,只有内容改变的时候,连接名称才会改变)
vue缓存机制
3.第三方库使用CDN的方式引入
4.使用SSR后端渲染,数据直接输出到HTML中(server side render服务器端渲染)
①CSS放前面,JS放后面
②懒加载(路由懒加载,图片懒加载)
③给引用的js文件加defer=“defer”
<script defer="defer" src="${ctx}/js/echarts.min.js"></script>
defer属性相当于告诉浏览器立即下载脚本,但延迟执行,脚本会在整个页面元素解析完成后再运行
④加async属性
在<script>
标签中加async属性,该属性与defer属性类似,相当于告诉浏览器立即下载脚本,但是是异步加载,下载速度不确定,执行速度也不确定。
<script defer="defer" async="async" type="text/javascript"> document.write("<scr" + "ipt src=\"./static/js/Convert.js\"></sc" + "ript>");
</script>