大前端优化总结【持续更新】

437 阅读1分钟

个人笔记,不断学习总结各种大前端优化方案,有兴趣的可以了解学习,没兴趣的出门右拐,当然,各位大佬有心探讨交流,留言分享好的文章,感激不尽。

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则完全相反