个人笔记,不断学习总结各种大前端优化方案,有兴趣的可以了解学习,没兴趣的出门右拐,当然,各位大佬有心探讨交流,留言分享好的文章,感激不尽。
1. React优化
1.1 首屏加载优化
在root节点加入一些html或者svg图 | 骨架屏,常用插件
- html-webpack-plugin自动插入loading
- 采用prerender-spa-plugin插件插入
1.2 代码拆分
常规的打包生成的代码分为以下四部分
1. 基础框架,比如react,react-dom,lodash,jq等
可长效缓存,cdn加速,生成链表等
2. polyfill,es2015+的一些兼容性垫片
非必要,可以根据用户浏览器版本支持度,引入polyfill.io,它可以根据浏览器头部去确定该浏览器不支持哪些polyfil,返回对应的资源
3. 业务基础库,比如公用的css,字体以及js工具方法
splitChunksPlugin拆分代码
4. 业务代码,单个页面的具体逻辑业务代码
splitChunksPlugin拆分代码,异步加载等
1.3 使用Tree shaking减少业务代码体积
splitChunksPlugin拆分代码
1.4 资源预加载懒加载
4.1 部分代码异步加载
react-loadable
4.2 图片资源懒加载
react-lazyload
4.3 加载之前占位
react-placeholder | react-hold
1.5 根据浏览器是否只是es2015+来打包两份代码
es2015+,加载type为module但不会加载有nomodule属性的script,es2015则完全相反