1.删除以 .map 结尾的文件(不用手动删除)
.map文件的作用是帮助编译后的代码调试,但是我们上线的代码已经调试完成,所以上线时可以不生成.map文件
可以在config/index.js 中修改成false,之后就不会生成.map文件了
productionSourceMap: false,
2.cdn 加速(效果最明显)
我的网站直接提升了10秒的响应速度
为什么cdn会快这么多,我说一下原因:
首先你会发现这个 app.js 1.6M 花了14秒,怎么优化呢?
vue run build (编译)的时候会把 vue.js;router.js;vuex.js 都打到 app.js 中 导致 文件太大,
如果把自己写的东西 和 开源的 js 分开,服务器只加载,自己写的东西,开源的 js 交给cdn,是不是会快很多呢?
https://www.bootcdn.cn/ 这里提供了前端 开源 js 的免费 cdn 加速服务,所以你为什么不用呢?
具体实现
1.在index.html 中加入cdn
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
2.在package.json中把这些依赖删掉,因为你要用cdn加载他们
"axios": "^0.19.0",
"element-ui": "^2.12.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.1.1"
3.需要在build/webpack.base.conf.js 中加入,这样可以避免编译时报错;
externals: {
'vue-router': 'VueRouter',
'vue': 'Vue',
'axios': 'axios',
'element-ui': 'ELEMENT',
'vuex': 'Vuex',
},
4.在main.js 中
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);
// import axios from 'axios'
//路由
import router from './router'
Vue.use(router)
//vuex
import store from './store/index.js'
//ElementUI
Vue.use(ELEMENT)
//axios
Vue.prototype.$http = axios
5.在 router/index.js 中
// import Vue from 'vue'
// import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
)}
6.在store/index.js 中
// import Vue from 'vue';
// import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
})
写到这大家应该明白了,以前需要 import 的东西,现在直接用就行,根据你之前声明的 externals
7.把 node-model 文件夹删掉,重新 install
//先删掉文件夹再执行
cnpm install
8.最后重新编译,看效果
npm run build
对比之前是不是,快了10秒。。
3.Gzip优化
1.安装一个插件
cnpm install --save-dev compression-webpack-plugin@1.x
2.配置config/index.js
//改为true
productionGzip: true,
3.编译
//你会发现会生成 .gz 的压缩包
npm run build
4.Nginx配置
如果 gzip_static 设置为 on, 那么就会使用同名的.gz 文件,不会占用服务器的 CPU 资源去压缩
http {
gzip on;
gzip_static on;
gzip_min_length 1024;
gzip_buffers 4 16k;
gzip_comp_level 2;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";
}
现在的响应速度2秒,之前是18秒左右,真的是天差地别啊。
如果看不懂,可以参考:
https://www.jianshu.com/p/0b61ef87bf7f