Vue项目优化，减小打包体积

使用Vue-cli脚手架搭建项目Vue的话(这里说明一下，我用的是脚手架2.x)，看这里

 1.使用路由懒加载
 原理，让文件按需加载，使用的时候再加载出来
在路由文件导出的对象加入下面这种格式
export default new VueRouter({

routes: [
    {
      path: '/',
      redirect:'./wx_login'
    },
    {
      path: '/wx_login',
      component: resolve => require(['../pages/wx_login.vue'], resolve),
      meta: { title: '微信登录页', permission: true }
    },
    ... ...]

})
第一个对象代表项目启动后默认重定向进入wx_login，
第二个对象就是其余剩下文件的路由声明方式，关键看component那里，那里使用es6语法，声明一个resolve函数，函数体的实际内容是
return require(['../pages/wx_login.vue'], resolve),因为es6语法原因，函数体一行结果的话可以省略return，所以这里我就省略了，
这里使用require引入资源文件，然后在函数内部执行函数;

2.使用Gzip压缩文件
在src文件夹同目录下的config文件夹下找到index.js文件
把productionGzip的值改为true

3.打包时可以看到dist文件下js文件中有.map.js文件，这个文件的作用是打包时提示错误行及错误文件位置，如果不要的话，
也是在src文件夹同目录下的config文件夹下找到index.js文件将
productionSourceMap的值改为false

4.抽离第三方包，改用cdn网络请求第三方包资源
在src文件夹同目录下的build文件夹下找到webpack.base.conf.js文件
在默认导出数据中加入下列对象，这里我抽离出了vue，axios，vue-router及UI框架，根据项目需求，抽离出第三方包
externals: {
    'vue': 'Vue',
    'axios': 'axios',
    'mint-ui':'MINT',
    'vue-router': 'VueRouter',
    'iview':'iview'
  }
然后在index.html中使用
<script src='http://xxx/xxx'></script>
...
来请求资源文件，这里需要注意的是这个externals对象中键值对的值对应的是全局导出的实例对象，
也就是一开始你在main.js中
import Vue from './vue'
导入进去的对象，这个你可以看CDN资源文件中有默认导出的信息来观察它的大小写以及命名方式

5.整合图片，任何项目中体积最大的永远都是图片，这个不用我过多介绍了，
①项目打包前，将所有的本地资源图片跟项目组成员作对比，将公用图片提取出来，
②将小图片使用工具合成起来，也就是我们常说的雪碧图（精灵图）

6.使用webpack-bundle-analyzer插件观察项目体积大小，找到体积最大的文件，做出针对性优化，
cnpm install --save-dev webpack-bundle-analyzer        安装依赖文件
查看方式输入 cnpm run build --report

7.图片懒加载，当图片资源过多时，页面加载速度肯定过慢，这时我们就要根据视图层来针对显示了
，这里推荐使用v-loader,另外提醒一下mintUI自带懒加载指令，使用方式也特别简单，在加载图片资源img标签中，
将src换成v-lazy,如果图片未加载出来，或正在加载中，你可以这样写
<img v-lazy="{src:scope.row.thumb, loading:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1345330011,1082178654&fm=26&gp=0.jpg',error: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2978335771,143699289&fm=26&gp=0.jpg'}" alt="">
该对象中，src加载的是后台资源请求数据变量，这个不要理会，看后面就行，注意这样写的好处是对特定的页面加载不同的错误图片及加载中图片
全局使用是这样
Vue.use(VueLazyload,{
  preLoad: 1.3, //预加载高度
  attempt: 1, //尝试次数
  error:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2978335771,143699289&fm=26&gp=0.jpg',
  loading:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1345330011,1082178654&fm=26&gp=0.jpg'
})

好了，我的分享就到这里，如果还有什么好的建议，可以发送给我的邮箱:
like_no_scode@163.com