vue优化chunk-vendors.js文件

前言-问题所在

由于服务器宽带不够大且没有配置CDN造成首页加载过慢的情况。

打开调试，发现是chunk-vendors.***.js文件在打包后内存占用较大造成的。

已经开了路由懒加载，但是加载还是慢

解决方案

vue优化方法很多：

1. 按需加载： 使用Vue Router来实现懒加载路由，这将减小初始加载的文件大小，只有在需要时才会加载路由组件。
2. 组件懒加载： 对于常用的组件，可以使用Vue的异步组件特性，将它们按需加载，而不是在初始加载中导入所有组件。
3. 组件缓存： 对于经常使用的组件，可以使用keep-alive组件来缓存它们，以减少组件的重复渲染。
4. 最小化依赖： 确保你的项目只依赖于你实际使用的Vue插件和库，不要包含不必要的依赖。
5. CDN引入： 可以通过CDN引入，以减小项目的打包体积。
6. 图像和资源优化： 压缩和优化项目中的图片和其他静态资源，以减小文件大小。
7. 代码拆分： 使用Webpack或其他构建工具的代码拆分功能，将项目代码拆分成小块，使页面加载更快。

但是此项目的Poetize大佬已经做了很多优化了，比如懒加载，代码拆分。

但是还可以再优化一些，就是压缩打包文件，使用gzip去打包。

Nginx开启Gzip加载

以下代码放在nginx.conf里面

# 启用 Gzip 压缩
gzip on;

# 配置 Gzip 压缩缓冲区大小
gzip_buffers 32 4K;

# 配置最小文件大小，小于该大小的文件不会被压缩
gzip_min_length 100;

# 配置 Gzip 压缩级别（1 到 9，9 最高压缩）
gzip_comp_level 6;

# 配置要压缩的文件类型（MIME 类型）
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" 头，通知代理服务器和浏览器在缓存时考虑 "Accept-Encoding" 头
gzip_vary on;

# 配置禁用 Gzip 压缩的条件
gzip_disable "MSIE [1-6]\.";

配置完在服务器重启nginx，再打开网站调试模式查看

由此看到已经使用了gzip去加载，没有直接使用.js文件去加载

（tips：bg.jpg占用了10.35秒是因为这个图片资源在七牛云存储空间中，七牛云服务器偶尔会响应慢，毕竟是免费的）

Nginx开启了Gzip加载，但是依旧用的.js加载的解决方法

1. 首先安装插件compression-webpack-plugin

npm install --save-dev compression-webpack-plugin #这个跟依赖版本起冲突的话，用下面的命令
npm i compression-webpack-plugin@5.0.1 #安装低版本compression-webpack-plugin

2. 配置vue.config.js

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

module.exports = {
  devServer: {
    port: 80,
  },
  productionSourceMap: false,
  configureWebpack:{
    resolve:{
      alias:{
        '@':path.resolve(__dirname, './src'),
        '@i':path.resolve(__dirname, './src/assets'),
      }
    },
    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
      })
    ]
  }
};

3. 然后运行打包程序

npm run build

这时候打包出来的文件就带.gz的压缩文件了，把这些再放到nginx中去，重启nginx服务

优化方法还有很多，剩下的需要自己去探索了