前端项目性能优化

在前端工程化项目的项目中，版本不断迭代，项目的性能优化就变的十分重要了。

1、提升开发体验

• source Map
  源代码映射；让开发或上线时代码报错能有更加准确的错误提示。

2、提升webpack打包构建速度

• HRM(HotModuleReplcement)
  开发时只重新编译打包 更新变化了的代码，不变的代码使用缓存，从而使得更新的速度
• Oneof
  让资源文件一旦被某个loader处理了，就不会继续遍历了，打包速度加快
• Include/Exclude
  排除或只检测某些文件，处理的文件更少
• Cache
  对exlint和babel处理的结果进行缓存，让第二次打包速度更快
• Thead
  多线程处理eslint和babel任务（进程启动通信也是有开销的，需要大项目时使用才有明显效果）

3、减少代码体积

• Tree Shaking
  剔除了没有使用的多余代码，让代码体积更小
• Image Minimizer
  对项目中的图片进行压缩
• CompressionWebpackPlugin插件
  gzip(需要配合nginx配置)：生成的dist文件夹中的JS和CSS文件多出了同名.gz文件。大幅度减少打包后的代码体积
• UI库的按需加载
  elementUI根据官方文档配置

4、优化代码运行性能

• code dplit代码分割
  对代码进行分割成多个js文件，从而使单个文件体积更小，并行加载js速度更快。并通过import动态导入语法进行按需加载，从而达到使用时才加载该资源，不用时不加载资源。
• cacheGroups 配置项
  node_modules中如果有比较大的包时；所有的node_modules都打包在同一个js文件，抽取成为单独的js文件。例如把vue,vue-router打包进同一个js文件
• 路由懒加载
  vue项目：const home = () => import('@/pages/home/index.vue')
• core-js
  对js进行兼容性处理，让我们代码能运行在低版本浏览器中
• perload/prefetch
  对代码进行提前加载；兼容性不太行，等低版本浏览器不维护时就很好用了
• PWA
  能webAPP让代码离线也能访问，从而提升用户 体验
• 代码层面
  防抖和节流、减少回流和重绘、v-if和v-show的使用、离开路由时销毁定时器和监听事件、keep-alive