前端实习：Vite4 打包优化实现首屏加载优化

前文

今天我们来一起学习如何配置Vite4中的vite.config.js文件，实现首屏加载优化

一、安装打包视图分析工具

1.安装

npm i rollup-plugin-visualizer -D 
cnpm i rollup-plugin-visualizer -D
yarn add rollup-plugin-visualizer -D
pnpm i rollup-plugin-visualizer -D

2. 在vite.config.js中引入 rollup-plugin-visualizer 插件

import { visualizer } from 'rollup-plugin-visualizer';
const viteConfig = defineConfig((mode) => {
     return {
        plugins: [
           visualizer({
                open: true, //在默认用户代理中打开生成的文件
                gzipSize: true, // 收集 gzip 大小并将其显示
                brotliSize: true, // 收集 brotli 大小并将其显示
                filename: "index.html", // 分析图生成的文件名
            })
        ]
}

之后完成打包之后，浏览器会自动弹出一个Html文件，如下图：

二、按需引入第三方库（其实最好的方式是引入Cdn，但是公司的项目是内网开发，所以。。。）

（1）main.js中，除去全局引入的矢量图标和样式

（2）安装插件

npm i unplugin-vue-components -D
npm i unplugin-auto-import -D
npm i unplugin-icons -D

（3）vite.config.js配置文件

import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
  ElementPlusResolver
} from 'unplugin-vue-components/resolvers'

const viteConfig = defineConfig((mode) => {
     return {
       return {
        plugins: [
        AutoImport({
	        resolvers: [
                ElementPlusResolver(), 
                IconsResolver({ prefix: 'Icon'})]
                }),
	      Components({
                resolvers: [
                ElementPlusResolver(), 
                IconsResolver({enabledCollections: ['ep']})
                ]
                })
        Icons({
                autoInstall: true,
                })
           }
         ]
       ]
     }

（2）Echarts按需引入（本项目只用到了折线和柱状图）

1.HTML部分

<template>
	<div class="echarts-container">
		<div ref="main" class="echarts-container-item"></div>
	</div>
</template>

<script setup>
import echarts from "../../../utils/commonEchart.js";
import { ref, onMounted, defineProps, onBeforeUnmount } from 'vue';

const props = defineProps(['title', 'chartData', 'theme']);
const main = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value

const init = () => {
	const { chartData, theme } = props;
	const myChart = echarts.init(main.value, theme);

	myChart.setOption(chartData);

	const resizeHandler = () => {
		myChart.resize();
	};

	onMounted(() => {
		window.addEventListener('resize', resizeHandler);
	});

	onBeforeUnmount(() => {
		window.removeEventListener('resize', resizeHandler);
	});
};

onMounted(() => {
	init();
});
</script>

2.commonEchart.js部分

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
 
/** 引入柱状图and折线图图表，图表后缀都为 Chart  */
import { BarChart, LineChart } from "echarts/charts";
 
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from "echarts/components";
 
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
 
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
 
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LineChart,
]);
 
// 导出
export default echarts;

三、删除console和debugger

1.安装npm i terser -D（因为Vite4不支持）

2.vite.config.js中配置

build: {
            // 清除所有console和debugger
            terserOptions: {
                compress: {
                  drop_console: true,
                  drop_debugger: true
                }
              },
          }

四、使用 gzip 压缩

1.安装npm i vite-plugin-compression -D

2.vite.config.js中配置

import viteCompression from 'vite-plugin-compression';
plugins: [
      viteCompression(
      algorithm: "gzip", // 指定压缩算法为gzip,[ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
      ext: ".gz", // 指定压缩后的文件扩展名为.gz
      threshold: 10240, // 仅对文件大小大于threshold的文件进行压缩，默认为10KB
      deleteOriginFile: false, // 是否删除原始文件，默认为false
      compressionOptions: { level: 9 }, // 指定gzip压缩级别，默认为9（最高级别）
      verbose: true, //是否在控制台输出压缩结果
      disable: false, //是否禁用插件
]

五、分包策略

把大文件拆分为小文件，这样访问服务器上的资源时，速度肯定会变快

1.vite.config.js中配置（主要针对）

build: {
rollupOptions: {
			output: {
			chunkFileNames: 'assets/js/[name]-[hash].js',
			entryFileNames: 'assets/js/[name]-[hash].js',
			assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
			manualChunks(id) {
			if (id.includes('node_modules')) {
	return id.toString().match(/\/node_modules\/(?!.pnpm)(?<moduleName>[^\/]*)\//).groups.moduleName ?? 'vender';
						}
					},
				}
			}
}