vue-cli项目优化点

vue-cli项目优化点

使用vue-cli部署生产包时，发现资源包很大，打包后的vendor.js达到了1M+。

1.组件按需加载
如果使用了第三方组件/UI库，如element-ui, mint-ui,echarts等，如果全部引入，项目体积非常大，这时可以按需引入组件。

//main.js
	import Vue from 'vue'
	import { Dialog, Loading } from 'element-ui'
	Vue.use(Dialog)
	Vue.use(Loading.directive)
	Vue.prototype.$loading = Loading.service
//然后正常使用组件

2.路由懒加载
当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

//router.js
import Vue from 'vue'
import Router from 'vue-router'
//import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)

const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component:HelloWorld
    }
  ]
})

3.异步组件（动态组件）懒加载
当你所在的项目中的组件在页面加载时不需要，只在触发条件时用到，这时可以使用异步组件的写法，并且加载一次后就有缓存。(下面两种方法均可)

<template>
  <div class="hello">
     <Movie-list></Movie-list>
  </div>
</template>
<script>
export default {
  components:{
    "Movie-list":resolve=>(['./list'],resolve)
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<template>
  <div class="hello">
     <Movie-list></Movie-list>
  </div>
</template>
<script>
const List= ()=>import("./list");
export default {
  components:{
    "Movie-list":List
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

4.图片压缩与合并
图片压缩地址：https://tinypng.com/
压缩后适合的做成精灵图

5.v-for和v-if不要同时使用
由于 v-for 和 v-if 放在同一个元素上使用会带来一些性能上的影响，在计算属性上过滤之后再进行遍历。

6.动态组件使用Keep-alive
我们经常会使用v-if指令来控制动态组件的显示与否，而v-if是会创建和销毁的，如果频繁操作在ie下的内存会持续上升，keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
官网案例：https://cn.vuejs.org/v2/api/#keep-alive

7.在scope中少用元素选择器
在 scoped 样式中，类选择器比元素选择器更好。为了给样式设置作用域，Vue 会为元素添加一个独一无二的特性，如：button[data-v-f3f3eg9]，用大量的元素选择器加大运行的效率

8.思量v-if和v-show的用法
权限问题用v-if
用户点击频繁切换的使用 v-show,但是v-if，因为减少了 dom 数量，加快首屏渲染，不是肉眼可见的区别建议使用v-if

9.使用Set
Es6集合Set()可优化遍历速度，set集合是可用于查找该集合内是否存在某个元素。但如果使用了Bable自动转化，该优化无效。

10.使用CDN加速vue类库
一般项目里用到的第三方js库主要有：vue、vue-router、vuex、vue-resource、axio等。这些依赖库的js文件被一起打包到vender 文件，导致vender文件很大，首屏加载速度肯定会被拖慢。

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>

修改 build/webpack.base.conf.js

module.exports = {
  context: path.resolve(__dirname, '../'),
   entry: {
    app: './src/main.js'
   },
  externals:{
   'vue': 'Vue',
   'vue-router': 'VueRouter',
   'vuex':'Vuex',
   'vue-resource': 'VueResource'
  }
 }

利用webpack的externals，在 上面文件中module里面与rules同层加入externals。
并且修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource等：

// import Vue from 'vue'
// import VueResource from 'vue-resource'
// Vue.use(VueResource)

11.压缩代码
vue-cli已经使用UglifyJsPlugin 插件来压缩代码，可以设置成如下配置：

 new webpack.optimize.UglifyJsPlugin({
	 compress: {
	   warnings: false,
	   drop_console: true,
	   pure_funcs: ['console.log']
	 },
	sourceMap: false
 })

其中sourceMap: false是禁用除错功能。如果设为true，在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的情况下仍可进行调试。这个功能虽好，但会大大增加整体资源包的体积，所以将其禁用。

总结：
有问题要指出，若还有其他的方法欢迎大家在下面补充。