【vite】vite生产环境性能优化篇（一）

【背景】： 现有项目打包后文件过大，且加载过慢，优化后，文件包减小了26%，其中，依赖引入模块减少了40%。

主要思路是以下几步：

一，构建分析：rollup-plugin-visualizer

这是性能优化的第一步，可以理解为体检，先知道自己的问题在哪里，然后再逐个击破

npm i rollup-plugin-visualizer -D

效果展示：

鼠标浮动上去后，会展示具体模块的信息，如大小，涉及文件等

彩色区域是项目代码，红色区域是node_modules包

二，按需引入：使用unplugin-auto-import插件

对element plus按需引入，且不需要在main.ts中再引入一次

import AutoImport from 'unplugin-auto-import/vite';

AutoImport({
    resolvers: [ElementPlusResolver()],
}),

注意：element-plus默认是英文，按需引入后要配置中文包需另外设置

App.vue中设置

<template>
    <el-config-provider :locale="zhCn">
         <router-view />
    </el-config-provider>
</template>

//ele中文
import { ElConfigProvider } from 'element-plus';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';

三，打包分割代码--manualChunks

 rollupOptions: {
     output: {
            manualChunks(id) {
                if (id.includes('element-plus/theme')) {
                     return 'ele';
                }
                // 将 node_modules 中的代码单独打包成一个 JS 文件
                if (id.includes('node_modules')) {
                     return 'vendor';
                }
           },
      },
},

四，清除代码中日志信息

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

五，cdn引用

如：echart

echart用cdn引入，注意同时删除package中的引入，

 //index.html
 <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>

vite externals配置，处理cdn引入的依赖库

//安装工具
npm i vite-plugin-externals -D 

//vite.config.ts中配置
 plugins: [
      viteExternalsPlugin({
         echarts: 'echarts'
      })
 ]

以上为vite生产环境构建优化的第一次尝试

诸多细节还待学习

to be continue...