1.异步加载路由（按需加载、懒加载）
2.异步加载组件、插件（按需加载、懒加载）
3.尽量减少 DOM 访问和操作，减少重绘和回流
4.尽量使用防抖和节流
5.插件可以使用CDN引入，减少打包体积，提高访问速度
6.webpack配置优化
- 区分dev和prod配置，避免prod引用无效得插件
- 使用SplitChunksPlugin，cacheGroups配置缓存组，提升打包速度
- 自动拆分chunks，抽离公用代码和第三方插件
node_modules内得插件单独拆到Vendors.chunk，新的chunk可以被共享- 自己写的utils工具函数可以根据引用次数minChunks配置，决定是不是要拆到单独chunk内
- enforceSizeThreshold可设置强制执行拆分的体积阈值，体积超过阀值就拆到单独chunk内
- minSize生成 chunk 的最小体积，避免生成过小的chunk文件
- extract-text-webpack-plugin，把CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载，优势：异步加载，没有重复的编译（性能）
- mini-css-extract-plugin，抽离css及css压缩配置
- terser-webpack-plugin，js压缩
- image-minimizer-webpack-plugin，图片压缩（可选无损压缩和有损压缩）
- webpack@4xx (url-loader) ；webpack@5xx，type:"asset"配置parser.dataUrlCondition.maxSize阀值，超出阀值，自动转为data-url，base64格式。
- prerander-spa-plugin，配置页面预渲染，设置单独entry出口文件，提升某个页面的到达时间，利于SEO
- nuxt.js 服务端渲染，利于SEO，页面响应时间快，服务器开销变大
- 过滤
注释，过滤console.log
7.quicklink
quicklink 是一个通过预加载资源来提升后续方案速度的轻量级工具库。旨在提升浏览过程中，用户访问后续页面时的加载速度。
当我们提到性能优化，往往都会着眼于对当前用户访问的这个页面，如何通过压缩资源大小、删减不必要资源、加快页面解析渲染等方式提升用户的访问速度；而 quicklink 用了另一种思路：我预先帮你加载（获取）你接下来最可能要用的资源，这样之后的真正使用到该资源（链接）时就会感觉非常顺畅。
照着这个思路，我们需要解决的问题就是如何预先帮用户加载资源呢？这里其实涉及到两个问题：
- 如何去预加载一个指定资源？（预加载的方式）
- 如何确定某个资源是否要加载？（预加载的策略）
