在前端工程化项目的项目中，版本不断迭代，项目的性能优化就变的十分重要了。
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
