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,我们也可以使用异步加载。