前端优化方案简述

1. 按实际项目需求配置webpack的optimization选项；可查看以下连接进行研究（https://webpack.docschina.org/guides/caching/#extracting-boilerplate、）

2. 使用import()实现动态加载；

3. 使用Webpack v4.6.0+ 增加的预获取和预加载（prefetch/preload module）功能，不懂慎用；（原理教程 https://cloud.tencent.com/developer/article/2164138）

4. webpack指南中的 构建性能 可以提高项目构建的速度；

5. 设置Viewport：HTML的viewport可加快页面渲染；

6. 防抖；

7. 尽量使用事件委托；

8. 内联首屏关键css，css下载会阻塞渲染，可以内联关键的css。缺点是css无法被缓存；

9. 开启Gzip加速；

10. 图片方面的优化，如 src 属性不该为空；

11. 不关键的js脚本，放尾部执行，最大限度减少脚本对页面的阻塞；

12. 配置使用 CDN 方式引入资源库

13. 降低包的请求数量和大小；