webpack优化

总结一下从4个角度对webpack和代码进行优化：

1.提升开发体验：

使用SourceMap让开发或线上时代码报错能有更加准确的错误提示。

2.提升webpack提升打包构建速度

使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。

使用OneOf让资源文件一旦被某个loader处理了，就不会遍历了，打包速度更快。

使用Include/Exclude排除或只检测某些文件，处理的文件更少，速度更快。

使用cache对eslint和babel处理结果进行缓存，第二次打包速度更快。

使用thread多进程处理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能让代码离线也可以访问，提升用户体验，但是兼容性较差，看情况使用。