1.提升开发体验
SourceMap技术
作用：准确找到报错位置，便于开发
用法：
开发模式：cheap-module-source-map
优点：打包编译速度快，只包含行映射
缺点：没有列映射
生产模式：source-map
优点：包含行/列映射
缺点：打包编译速度更慢
2.提升打包构建速度
HMR：热更新，只更新编译的部分而不是刷新整个界面，想要实现js页面需要单独配置或者引入所需loader
oneOf：每个文件只能被其中一个loader配置处理
Include/Exclude
Include:只处理XXX文件
Exclude：处理XXX文件以外其他文件都处理
Cache
对eslint检查和Babel编译结果进行缓存
Thead
多进程打包：开启电脑的多个进程干一件事，速度更快
使用：
1.获取CUP的核数
2.下载包
npm i thread-loader -D
3.配置
3.减少代码体积
Tree Shaking
移除js中没有使用上的代码
Babel
@babel/plugin-transform-runtime：禁用Babel自动对每个文件的runtime注入，而是引入
1.下载包
npm i @babel/plugin-transform-runtime -D
2.配置
Image Minimizer
是什么：
image-minimizer-webpack-plugin：用来压缩图片的插件
用法：
1.下载包
npm i image-minimizer-webpack-plugin imagemin -D
无损压缩：
npm i imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
有损压缩：
npm i imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
2.配置
4优化代码运行性能
codeSplit
是什么：
代码分割：将打包生成的文件进行分割，生成多个js文件
按需加载：需要哪个文件就加载那个文件
Preload/Prefetch
在浏览器空闲时加载后续需要使用的资源
preload:告诉浏览器立即加载资源。
prefetch:告诉浏览器在空闲时才开始加载资源
共同点：
都会加载资源但不执行
都有缓存
区别：
preload优先级高，prefetch优先级低
preload只能加载当前页面所需要使用的资源，prefetch可以加载当前页面资源，也可以加载下一个页面需要使用的资源
总结：
当前页面优先级高的资源用preload加载
下一页面需要使用的资源用preload加载
怎么用：
1.下载包
npm i --save-dev @vue/preload-webpack-plugin
2.引入
3.配置
core-js
处理ES6及以上API的polyfill
polyfill翻译过来叫垫片/补丁。让我们在不兼容某些新特性的浏览器上，使用该新特性
怎么用
1.下载包
npm i core-js
2.引入
在babel中配置
PWA
项目在离线时应用程序能够继续运行功能
怎么用
1.下载包
npm i workbox-webpack-plugin --save-dev
2.配置
总结
从4个角度对webpack和代码进行优化
1.提升开发体验
使用Source Map让开发上线时代码报错能力更加准确的错误提示
2.提升webpack打包构建速度
使用HotModuleReplacement让开发时之重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快
使用Oneof让资源一旦被某个loader处理就不继续遍历了，打包速度更快
使用Include/Exclude排除或只检测某些文件，处理的文件更少，速度更快
使用Cache对eslint和babel处理的结果进行缓存，第二次打包速度更快
使用Thead多进程处理eslint和babel任务，速度更快。
3.减少代码体积
使用Tree Shaking剔除了没有使用的多于代码，让代码体积更小
使用@babel/plugin-transform-runtime插件对babel进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小
使用Image Minimizer对项目中图片进行压缩，体积更小请求速度更快
4.优化代码运行性能
使用Code Split对代码进行分割成多个js文件，从而使单个文件体积更小，并行加载js速度更快。并通过import动态导入语法进行按需加载，从而达到需要时才加载该资源，不用时不加载资源
使用Preload/Prefetch对代码进行提前加载，等未来需要使用时直接使用，让用户体验更好
使用Network Cache能对输出资源文件进行更好的命名，将来好做缓存
使用core-js 对js进行兼容处理
使用PWA让项目在离线状态下也能访问
