Vue线上部署之cdn加速（终极加速）

1.概述

之前做过服务器nginx开启gzip压缩，速度缩减了很多，加载时间在1秒多，会出现白屏，原因是好多依赖被打包到js中了，体积太大，加载很慢，今天加了下cdn，速度真正起飞
gzip的线上部署设置

1.概述

之前做过服务器nginx开启gzip压缩，速度缩减了很多，加载时间在1秒多，会出现白屏，原因是好多依赖被打包到js中了，体积太大，加载很慢，今天加了下cdn，速度真正起飞
gzip的线上部署设置

2.cdn加速流程

修改vue.config.js

const compressionPlugin = require('compression-webpack-plugin')
module.exports={
    publicPath:"./",
    devServer:{
        port:'8088',
        proxy:{
            '/api': {
                target: 'http://localhost:8081/api',//代理地址
                changeOrigin: true,//是否允许开启代理
                pathRewrite: {//代理地址重写
                  '^/api': ''
                }
        }

    }
},
configureWebpack: config=>{
    if(process.env.NODE_ENV=='production'){
        return {
            plugins:[
                new compressionPlugin({//zip压缩插件
                    test: /\.js$|\.html$|\.css/,
                    threshold:10240,
                    deleteOriginalAssets:false
                })
            ],
            externals:{//排除一些引入的模块，不进行打包
                'vue':'Vue',
                'iView':'iview',
                'axios':'axios'
            }
        }
    }
}

}

注释掉类似内容

/* 按需引入 */
//import { Row, Col,Circle,Badge } from 'view-design';
//import Vue from 'vue';
// Vue.component('Row', Row);
// Vue.component('i-col', Col);
// Vue.component('i-circle', Circle);
// Vue.component('Badge', Badge);

main.js内容

 import Vue from 'vue'
import App from './App.vue'
 import axios from 'axios' // 1、在这里引入axios
 //import 'view-design/dist/styles/iview.css';
Vue.prototype.$axios = axios;   // 2、在vue中使用axios
axios.defaults.baseURL = "http://ip/api/"  //正式环境url
//axios.defaults.baseURL = "/api"
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

/pulic/index.html引入cdn链接

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/iview/3.5.1/iview.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>

    <link href="https://cdn.bootcss.com/iview/3.5.1/styles/iview.css" rel="stylesheet">

之后打包部署

3.cdn+gzip vs gzip

在这里插入图片描述

const compressionPlugin = require('compression-webpack-plugin')
module.exports={
    publicPath:"./",
    devServer:{
        port:'8088',
        proxy:{
            '/api': {
                target: 'http://localhost:8081/api',//代理地址
                changeOrigin: true,//是否允许开启代理
                pathRewrite: {//代理地址重写
                  '^/api': ''
                }
        }
        
    }
},
configureWebpack: config=>{
    if(process.env.NODE_ENV=='production'){
        return {
            plugins:[
                new compressionPlugin({//zip压缩插件
                    test: /\.js$|\.html$|\.css/,
                    threshold:10240,
                    deleteOriginalAssets:false
                })
            ],
            externals:{//排除一些引入的模块，不进行打包
                'vue':'Vue',
                'iView':'iview',
                'axios':'axios'
            }
        }
    }
}

}

注释掉类似内容

/* 按需引入 */
//import { Row, Col,Circle,Badge } from 'view-design';
//import Vue from 'vue';
// Vue.component('Row', Row);
// Vue.component('i-col', Col);
// Vue.component('i-circle', Circle);
// Vue.component('Badge', Badge);

main.js内容

 import Vue from 'vue'
import App from './App.vue'
 import axios from 'axios' // 1、在这里引入axios
 //import 'view-design/dist/styles/iview.css';
Vue.prototype.$axios = axios;   // 2、在vue中使用axios
axios.defaults.baseURL = "http://ip/api/"  //正式环境url
//axios.defaults.baseURL = "/api"
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')

/pulic/index.html引入cdn链接

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/iview/3.5.1/iview.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>

    <link href="https://cdn.bootcss.com/iview/3.5.1/styles/iview.css" rel="stylesheet">

之后打包部署

3.cdn+gzip vs gzip

下面是gzip的