针对Vue打包生成的vendor和app文件过大的优化

1、组件按需引入

element-ui按需引入

1、安装element-ui
npm install element-ui --save
因为element-ui是依赖于element，所以也需要安装此
npm install element --save
2、 npm install babel-plugin-component -D
3、 在.babelrc文件中添加此段代码

"plugins": [
  [
   "component",
   {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
   }
  ]
 ]

当然这里如果有其他的配置，只需要在 plugins 的数组中继续添加我们需要的配置代码就行了
4、将按需引入的代码单独分割一下，在 src 文件夹中新建 element 文件夹，并在里面新建一个 index.js 文件
// 导入自己需要的组件

import { Table, TableColumn, Pagination, Button,MessageBox } from 'element-ui'
const element = {
 install: function (Vue) {
 	//使用 Vue.use() 默认会调用 install 方法
	//普通组件
	Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Pagination)
    Vue.use(Button)
    //MessageBox略有不同
    Vue.prototype.$msgbox = MessageBox
    //使用 this.$msgbox.alert
 }
}
export default element

5、在 main.js 中使用该文件，就大功告成了
// css样式还是需要全部引入

import 'element-ui/lib/theme-chalk/index.css'
import element from './element/index'
Vue.use(element)

2、去掉生成map文件

打包时会生成map文件，而map文件一般都比较大，可以取消生成map文件
config/index.js

{
	productionSourceMap:false
}

3、cdn引入

通过外部引入的方式引入外部文件，从而减少打包文件过大的问题
1、配置
webpack.base.conf.js

externals:{
  "vue":"Vue",
},

2、index.html

引入外部文件，并且加上

 <script src="https://cdn.staticfile.org/vue/2.5.2/vue.min.js"></script>

3、main.js

去掉在页面引入vue和vue-router

4、路由懒加载

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

const Foo = () => import('./Foo.vue')

5、代码压缩

安装 npm install --save-dev compression-webpack-plugin
config/index.js

{
	productionGzip：true
}