国产毛卡片在线观看,香蕉尹人综合精品

Vue使用CDN與GZIP打包部署優(yōu)化

前言

當(dāng)我們前端使用了大量組件和頁面之后，打包會導(dǎo)致項(xiàng)目體積過大，這時(shí)候部署后訪問有時(shí)候就會出現(xiàn)首頁喧染慢等一些尷尬而又急人的情況。這個(gè)時(shí)候我們就需要對項(xiàng)目進(jìn)行優(yōu)化，例如uniapp可以分包加載，vue則可以cdn加載三方插件與gzip壓縮js文件

一、CDN

CDN應(yīng)用廣泛，支持多種行業(yè)、多種場景內(nèi)容加速，例如：圖片小文件、大文件下載、視音頻點(diǎn)播、直播流媒體、全站加速、安全加速

1.cdn方式引入

首先要進(jìn)入我們的public/index.html，網(wǎng)上有很多cdn加速節(jié)點(diǎn)可以選擇


<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 rel="stylesheet">
2.修改config

本項(xiàng)目是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中該引入還是得引入的

其次在用到三方組件的時(shí)候，我們就可以局部引入了，舉個(gè)echarts例子，可以改為一下方式引入

import * as echarts from 'echarts'

然后部署后訪問時(shí)可以查看Network中的請求url是否為cdn加速

二、GZIP

1.配置

使用（compression-webpack-plugin）插件

npm install compression-webpack-plugin --save-dev
然后配置一下壓縮包設(shè)置

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) {
    // 移除打包后所有打包好的文件預(yù)加載行為
    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文件，這些都生成了一個(gè)gz文件

然后再來看一下網(wǎng)絡(luò)傳輸，傳輸?shù)拇_實(shí)是gz文件的大小

總結(jié)

這樣最起碼網(wǎng)站渲染速度提升一倍，也可以把靜態(tài)圖片資源換成網(wǎng)絡(luò)圖床圖片或者是懶加載一些路由都是可以的，希望大家的個(gè)人網(wǎng)站越來越完美吧

作者：小碼哥

歡迎關(guān)注微信公眾號：碼出宇宙

掃描添加好友邀你進(jìn)技術(shù)交流群，加我時(shí)注明【姓名+公司(學(xué)校)+職位】

在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

前端高級