前端项目优化方向与方法（webpack项目）

前端项目加载首屏，速度优化方法如下：

1.  webpack 开启 gzip压缩，使用 下面这个插件，具体使用方法查看说明。

npm install compression-webpack-plugin --save-dev

2. 使用CommonsChunkPlugin这个包，进行code split，详细说明请点击 CommonsChunkPlugin

3.webpack 实现持久性缓存，点击webpack实现持久性缓存

4.ui组件按需加载而不加载全部

// 例如按需加载elment ui 
// ./plugins/element.js 内容如下
import Vue from 'vue'
import { Button, Form, FormItem, Dropdown, DropdownMenu, DropdownItem, Autocomplete, Input, Table, TableColumn, Checkbox, Dialog, Upload, Message, MessageBox, Loading, Scrollbar, Popover, Tree } from 'element-ui'

Vue.use(Button)
Vue.use(Input)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Autocomplete)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Checkbox)
Vue.use(Dialog)
Vue.use(Popover)
Vue.use(Tree)
Vue.use(Upload)
Vue.use(Scrollbar)
Vue.use(Loading.directive)

Vue.prototype.$message = Message;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$loading = Loading.service;
Vue.prototype.$confirm = MessageBox.confirm;
// 在main.js
import App from './App.vue'
import './plugins/element.js'