Vue2.0中项目打包体积优化方案

SPA应用普遍存在的一个问题就是当项目的功能越来越多时，整个项目的体积就会越来越大，这就涉及的项目的优化了，下面提供几种项目优化的方案

1.首先就是项目中的静态资源的优化，例如图片，视频等大体积文件首先可以考虑使用类似七牛云之类的第三方云存储，这样就不会在项目中占用过大体积，如果项目没考虑到使用云存储，那就要考虑到图片资源的

压缩，我一般都是使用https://tinypng.com/进行图片的压缩，使用也很简单，压缩完毕后下载替换项目资源即可，一般1M的图片可以压缩到250kb。

2.配置webpack中的loader，对小于预定体积的图片资源使用base64位进行编码，这里的limit后面的单位是B,不占用项目静态资源体积，我是用的vue-cli2进行构建的项目，所以配置如下

 

 

 3.除了静态资源外，项目中使用的各种库才是体积占用的大头，项目本身只使用很少的一部分功能，但是库却是全部引入，即使是按需引入任然是有很大的体积，生产时项目的响应时间会很长，这里就是使用CDN进行加速，首先需要找到引入库对应的CDN资源，以echarts为例，找到main.js同级的index.html,使用script引入对应的资源

 

 

第二步在webpack中配置下即可

 

 

 

 

 

 

 然后卸载掉npm安装的依赖包，npm uninstall echarts --save,mian.js注释掉引入，然后在对应的使用组件里直接使用就行

 

 

 使用CDN可以同样作用于element-ui,vue-router,vuex等资源

暂时项目中使用的就这些，后续还有些小操作待补充