1、只加载与首屏相关的资源文件。如在vue或react框架中采用路由懒加载、按需加载的方式,减少首页需要载入的资源。
2、延迟加载或按需加载。script标签上加上async、defer
async:
1)使得script
脚本异步的加载并在允许的情况下执行;
2)async
的执行,并不会按着script
在页面中的顺序来执行,而是谁先加载完谁执行。
defer:
1)异步的下载该文件并且不会影响到后续DOM
的渲染;
2)多个设置了defer
的script
标签存在,则会按照顺序执行所有的script
;
3)defer
脚本会在文档渲染完毕后,DOMContentLoaded
事件调用前执行。
3、第三方库文件作cdn分发,配置webpack使得打包时不再包含本地第三方库的打包。
......
externals:{
"mint-ui":"mintui",
"vue":"Vue"
},
.....
4、公共文件抽离
5、代码分割
6、启用js、css、html压缩,打包时开启gzip压缩,关闭sourcemap。
7、生产环境去掉console代码,减少代码体积。
8、效果尽量使用css3完成,小图片通过一定的工具合成雪碧图或者转成base64。