webpack生产环境性能优化

最近在工作中，发现公司原来的前端项目，加载速度并不理想，所以对其进行优化。

资源缓存

在我看来，前端的项目中存在大量的第三方组件，图片等资源。通过缓存的方法，可以减少我们通过网络请求的数据量，每次请求资源时，只需要确认资源是否更新即可。

使用contenthash

在webpack中，一般有三种hash值，他们分别是hash，chunkhash，contenthash。hash是工程级别的，整个项目的hash值都相同。任何一个文件的变化，都会导致整个项目的hash值的变化。chunkhash：当入口文件或者其依赖发生变化时，hash值就会发生变化。contenthash：当文件的内容发生变化时，hash值会发生变化。

多文件输出

第三方库的打包

类似于vue，vue-router, lodash等第三方模块，一般不会修改代码。所以，我们可以对其进行单独的打包。在每次对于业务代码进行修改时，其hash值会保持不变。

小图片使用base64

通过使用base64编码图片，可以减少http的请求数量。但是base64并不能压缩图片，反而会增加图片的体积。

减少首屏加载的数据量

在页面第一次加载的时候，不需要加载所有的数据。可以使用异步加载，优先加载能看见的部分，对于不能看见的部分采用懒加载技术，懒加载有webapck层面的，也有vue，react框架层面的操作。对于vue中的组件，我们可以通过函数的方式引入组件配合v-if实现。对于一些不经常使用的大组件，例如echart，我们也可以使用异步加载。