...
externals: {
'vue': 'Vue',
'vuex': 'Vuex',
'vue-router': 'VueRouter',
'element-ui': 'ElementUI'
}
...
}
修改 src/router/index.js
// import Vue from 'vue'
import VueRouter from 'vue-router'
// 注释掉
// Vue.use(VueRouter)
...修改 src/store/index.js
...
// 注释掉
// Vue.use(Vuex)
...修改 src/main.js
import 'babel-polyfill'
import Vue from 'vue'
import App from './App'
import axios from 'axios'
import store from './store'
import router from './router'
import {sync} from 'vuex-router-sync'
import ELEMENT from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'Vue.config.productionTip = false
Vue.use(ELEMENT)
Vue.prototype.$http = axios
sync(store, router)
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
template: '<App/>',
components: { App }
})
注意！这里 element-ui 变量名要使用 ELEMENT，因为element-ui的 umd 模块名是 ELEMENT
再次打包，部署到Nginx服务，可以看到：
vendor.js 减少到了 112kb，提升85.5%！
再看CDN资源：
可以看出，5个请求共216kb，耗时619ms！
Nginx 开启 gzip
对 vendor.js 我们优化完了，接下来我们优化服务器上的资源。先看看没有开启 gzip 的效果：
可以看到有 13.5kb
Nginx开启gzip，修改nginx配置文件 nginx.conf:
...
http {
...
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
#gzip_http_version 1.1;
gzip_comp_level 2; # 压缩级别
# 要压缩的mine类型
gzip_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss image/jpeg image/gif image/png image/svg+xml;
gzip_vary off;
gzip_proxied expired no-cache no-store private auth;
gzip_disable "MSIE [1-6]."; # IE6不支持gzip
...
}关于 nginx gzip，请自行查阅相关资料
重启nginx服务，再看效果：
