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