Vue 项目优化 vendor文件过大

1 将常用的依赖包使用cdn的方式加载

可以大大减小vendor 的大小 主要是不占用自己的带宽 可以更快的加载出页面

  <link href="https://cdn.bootcss.com/element-ui/2.14.1/theme-chalk/index.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/vue/2.6.12/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.4.9/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.14.1/index.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>

两个提供cdn的网站

• https://unpkg.com (国外的)
• https://www.bootcdn.cn

2 productionSourceMap 设置

module.exports = {
  build: {
    productionSourceMap: false,
  }
}

设置为false就不会生成map文件 大大减少包的大小

3 productionGzip 代码压缩

在vue项目中安装依赖并将productionGzip改为true 开启Gzip压缩

module.exports = {
  build: {
    productionGzip: true,
  }
}

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

nginx 需要按照下面设置 并且重启nginx

# 开启动态压缩
gzip on;
# 开启静态压缩
gzip_static on;
# gizp压缩起点，文件大于1k才进行压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
gzip_buffers 4 16k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 5;  # 静态压缩的文件修改这个参数不会生效
# 进行压缩的文件类型
gzip_types text/plain application/javascript text/css application/xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

关于 nginx 的 gzip ，可以分为两种：
nginx 动态压缩，对每个请求先压缩再输出。
nginx 静态压缩，使用现成的扩展名为 .gz 的预压缩文件。

参考 https://killtheradio.net/technology/using-gzip_static-in-nginx-to-cache-gzip-files/