vue解决首屏加载过慢问题

vue打包过程中把依赖打成一个包，导致太大。

一般解决办法是分包和gzip压缩，在wepack和vite中的实现如下：

1、webpack版本：

在vue.config.js文件中设置

module.exports = {
configureWebpack: {
		optimization: {
           // 分包
			splitChunks: {
				chunks: 'all',
				cacheGroups: {
					vue: {
						test: /[\\/]node_modules[\\/]vue[\\/]/,
						name: 'chunk-vue'
					}
				}
			}
		},
	
		plugins: [
            // 压缩
			new CompressionPlugin({
				test: /\.(js|css|html)?$/i,     // 压缩文件格式
				filename: '[path].gz[query]',   // 压缩后的文件名
				threshold: 10240, // 小于10KB就不进行压缩
				algorithm: 'gzip',              // 使用gzip压缩
				minRatio: 0.8                   // 压缩率小于1才会压缩
			})
		]
	}
}

2、vite版本：

在vue.config.js文件中的build中设置，参考地址配置 Vite | Vite

build: {
  // 分包
 rollupOptions: {
        output: {
          entryFileNames: `assets/[name].${new Date().getTime()}.js`,
          chunkFileNames: `assets/[name].${new Date().getTime()}.js`,
          assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`,
          compact: true,
          manualChunks: {
            vue: ['vue', 'vue-router', 'vuex'],
            echarts: ['echarts']
          },
        },
      }
}

在nginx中解压参考常见问题 | RuoYi