马克社区,马克吐温社区,马克java社区Vue使用CDN与GZIP打包部署优化

Vue使用CDN与GZIP打包部署优化

前言

当我们前端使用了大量组件和页面之后，打包会导致项目体积过大，这时候部署后访问有时候就会出现首页喧染慢等一些尴尬而又急人的情况。这个时候我们就需要对项目进行优化，例如uniapp可以分包加载，vue则可以cdn加载三方插件与gzip压缩js文件

一、CDN

CDN应用广泛，支持多种行业、多种场景内容加速，例如：图片小文件、大文件下载、视音频点播、直播流媒体、全站加速、安全加速

1.cdn方式引入

首先要进入我们的public/index.html，网上有很多cdn加速节点可以选择


<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.2.0/vuex.min.js"></script>

<script src="https://lib.baomitu.com/echarts/5.0.2/echarts.common.js"></script>
<script src="https://lib.baomitu.com/echarts-gl/2.0.2/echarts-gl.js"></script>
<script src="https://lib.baomitu.com/v-charts/1.19.0/amap.js"></script>
<script src="https://lib.baomitu.com/xlsx/0.16.9/xlsx.js"></script>
<script src="https://lib.baomitu.com/jspdf/2.1.1/jspdf.es.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
2.修改config

本项目是Vue3，所以配置都在vue.config.js中，这里就是引入，然后一定要记得删除package.json中的依赖

module.exports = {
...
configureWebpack:{
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex',
'xlsx': 'XLSX',
'jspdf': 'jspdf',
'echarts': 'echarts',
'v-charts': 'v-charts',
'echarts-gl': 'echarts-gl',
'font-awesome': 'font-awesome'
},
}
}
3.修改引入方式

首先Vue你在main.js中该引入还是得引入的

其次在用到三方组件的时候，我们就可以局部引入了，举个echarts例子，可以改为一下方式引入

import * as echarts from 'echarts'

然后部署后访问时可以查看Network中的请求url是否为cdn加速

二、GZIP

1.配置

使用（compression-webpack-plugin）插件

npm install compression-webpack-plugin --save-dev
然后配置一下压缩包设置

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

module.exports = {
...
// 压缩包配置
configureWebpack:{
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      // 下面是下载的插件的配置
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5,
        minChunkSize: 100
      })
    ]
},
chainWebpack(config) {
    // 移除打包后所有打包好的文件预加载行为
    config.plugins.delete('preload');
    config.plugins.delete('prefetch');
}
}
2.Nginx配置

http {
...
# 开启
gzip on;
gzip_min_length 1k;
gzip_buffers     4 16k;
gzip_http_version 1.1;
# 压缩级别
gzip_comp_level 9;
# 压缩类型
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary on;
gzip_proxied   expired no-cache no-store private auth;
gzip_disable   "MSIE [1-6]\.";

}
3.压缩效果

来看一下压缩的js文件，这些都生成了一个gz文件

然后再来看一下网络传输，传输的确实是gz文件的大小

总结

这样最起码网站渲染速度提升一倍，也可以把静态图片资源换成网络图床图片或者是懒加载一些路由都是可以的，希望大家的个人网站越来越完美吧

作者：小码哥

欢迎关注微信公众号：码出宇宙

扫描添加好友邀你进技术交流群，加我时注明【姓名+公司(学校)+职位】

前端高级