前言

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

一、CDN

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

1.cdn方式引入

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

<!-- vue三剑客 -->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js">javascript"></script>
<script src="https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js">javascript"></script>
<script src="https://cdn.bootcss.com/vuex/3.2.0/vuex.min.js">javascript"></script>
<!-- 三方组件 -->
<script src="https://lib.baomitu.com/echarts/5.0.2/echarts.common.js">javascript"></script>
<script src="https://lib.baomitu.com/echarts-gl/2.0.2/echarts-gl.js">javascript"></script>
<script src="https://lib.baomitu.com/v-charts/1.19.0/amap.js">javascript"></script>
<script src="https://lib.baomitu.com/xlsx/0.16.9/xlsx.js">javascript"></script>
<script src="https://lib.baomitu.com/jspdf/2.1.1/jspdf.es.js">javascript"></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中的依赖

javascript">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例子，可以改为一下方式引入

javascript">import * as echarts from 'echarts'

在这里插入图片描述
然后部署后访问时可以查看Network中的请求url是否为cdn加速

在这里插入图片描述

二、GZIP

1.配置

使用（compression-webpack-plugin）插件

npm install compression-webpack-plugin --save-dev

然后配置一下压缩包设置

javascript">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配置

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

}