Vue 项目访问加速

Im灬大神

已于 2024-09-29 10:37:47 修改

阅读量736

点赞数 2

分类专栏：前端相关文章标签： vue.js 前端 javascript

于 2019-11-26 10:57:41 首次发布

本文链接：https://blog.csdn.net/qq_43338182/article/details/103251320

版权

前端相关专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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]\.";
}