vue-cli 打包减少体积

vue-cli 打包减少体积

1、 设置配置文件

设置config文件夹index.js中productionSourceMap的值为false,也就是设置webpack配置中devtool为false。
sourcemap: 编译后代码对源码的映射

2、图片转base64

图片转base64可以减少请求加快加载速度
每加载一张图片都会发送一次请求,而base64码不会发送请求,但是如果图片太大,转base64码便会过长,这样会减慢页面渲染速度。vuecli默认配置是图片小于10kb就转base64

3、精灵图

将一些icon图合成一张精灵图,减少请求次数。

4、引用第三方库时组件按需加载

现在ui库大多都是以组件的形式进行处理,所以只需导入想要的即可【按需引入】,根据对应组件的文档进行操作即可。
注: 在导入css样式时依旧需要全部导入

5、vue-router 懒加载

利用 promise 异步功能,进行相关配置后,页面点击时,会根据相应的进行页面加载,而不是一次性加载完,毕竟实际生活中,有些页面也许根本就不会进入

6、组件按需加载

解决首屏加载慢问题
在router文件夹下index.js中配置路径时,可采取懒加载

拓展:
ps压缩图片:https://jingyan.baidu.com/article/48206aeadaca41216ad6b313.html

猜你喜欢

转载自blog.csdn.net/AI_U20/article/details/88202012