Vite优化方案

分析文件依赖其实也可以使用浏览器自带的lighthouse进行网站检测

其实优化的主要难点还是从哪里开始去优化，如果不清楚自己的项目问题出现在哪里，就显得比较盲目，不知道优化哪里，那在优化之前我们先分析一下我文件依赖

• 安装插件 rollup-plugin-visualizer

plugins:[
     visualizer({ open: true }) // 自动开启分析页面
]

• 运行打包命令，会自动弹出效果如下

通过该关系图得出依赖之间的关系，与文件大小，可以指定的去优化

指定文件按需加载

比如下面的echarts,这样就不会将整个包加载进来，因为vite自动开启tree-shaking，所以打包的时候只会将LabelLayout, UniversalTransition这两个依赖打进包里（包括组件库也是这种做法）

import { LabelLayout, UniversalTransition } from 'echarts/features';

如果使用 loadsh 需要更改为使用 ESM 版的 loadsh ，实现按需引入

import { cloneDeep } from 'lodash-es'

const obj = cloneDeep({})

下面开始运行我们本地打包的命令，查看依赖关系这样我们就可以相对于的优化

路径别名&文件尾缀

 resolve: {
      alias: {
        '@': pathResolve('src') + '/',
        '@views': pathResolve('./src/views') + '/',
      },
      extensions: ['.js', '.vue', '.json'], 
    },

静态资源的打包

 build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'js/[name]-[hash].js',  // 引入文件名的名称
        entryFileNames: 'js/[name]-[hash].js',  // 包的入口文件名称
        assetFileNames: '[ext]/[name]-[hash].[ext]' // 资源文件像 字体，图片等
      }
    }
  }

• 打包效果

最小化拆分包

将需要分离 的包 单独的打包出来

 // vite.config.ts
build: {
    // rollup 配置
    rollupOptions: {
        output: {
            manualChunks(id: any): string {  
                if (id.includes("node_modules")) {
                    return id
                            .toString()
                            .split("node_modules/")[1]
                            .split("/")[0]
                            .toString();
		        }
            }
        }
    }
}

关闭一些打包配置项

这个东西一般是在测试阶段调试使用的

第一种方法，使用 esbuild（官方推荐）

build: { 
      terserOptions: {
        compress: {
          //生产环境时移除console
          drop_console: true,
          drop_debugger: true,
        },
      },
    //   关闭文件计算
      reportCompressedSize: false,
    //   关闭生成map文件 可以达到缩小打包体积
      sourcemap: false, // 这个生产环境一定要关闭，不然打包的产物会很大
}

第二种方法，使用 terser 插件(因为 Vite 删掉了 terser)

npm i terser -D

在 vite.config.ts 中配置插件

build: {
    //移除生产环境log
    minify: 'terser',
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true,
      },
    }
  }

低版本浏览器兼容

1. 安装插件npm i @vitejs/plugin-legacy -D

  legacyPlugin({
      targets: ['chrome 52', 'Android > 39', 'iOS >= 10.3', 'iOS >= 10.3'], // 需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
    })

使用CDN

其实使用cdn也有很多中方式，在这里就介绍我在项目中使用的，当然我这种也不是比较好方案，如果你有更好的方案，还请在下面留言

1. 安装插件 npm install rollup-plugin-external-globals -D
2. 配置插件比如我们需要吧Vue使用CND的方式引入

rollupOptions: {
        //  告诉打包工具 在external配置的 都是外部依赖项  不需要打包
        external: ['vue'],
        plugins: [
            // 避免打包和生产模式运行出错 在这里声明公共模块
          externalGlobals({
            //  "在项目中引入的变量名称" ："CDN包导出的名称，一般在CDN包中都是可见的"
            vue: 'Vue', 
          }),
        ] 
      },
      

3. 配置CDN地址 我们借助vite-plugin-html插件来帮我们自动引入地址

// 引入
import { createHtmlPlugin } from 'vite-plugin-html';
// 将下面的添加到plugin下
createHtmlPlugin({
    minify: true,
    inject: {
        data: {
        title: ENV.VITE_APP_TITLE,  // 这里是配置的环境变量
        vuescript:'<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>',
        },
     },
    }),

4. 最后在我们模板页面head部分上写入ejs模板语法

<% vuescript %>

5. 最后打包完在html文件中会自动将模板替换掉达到下面的效果

开启Gzip

它的主要作用就是缩小打包的体积

1. 安装插件 npm install vite-plugin-compression -D

2. 参数

   • filter：过滤器，对哪些类型的文件进行压缩，默认为/.(js|mjs|json|css|html)$/i
   • verbose: true：是否在控制台输出压缩结果，默认为 true
   • threshold ：启用压缩的文件大小限制，单位是字节，默认为 0
   • disable : false：是否禁用压缩，默认为 false
   • deleteOriginFile ：压缩后是否删除原文件，默认为 false
   • algorithm ：采用的压缩算法，默认是 gzip
   • ext ：生成的压缩包后缀

viteCompression({
    verbose: true,    
    disable: false,
    threshold: 10240,  
    algorithm: 'gzip',
    ext: '.gz',
    })

3. 打包输出效果

通过上面可以明显的看出开启Gzip与不开启存在明显的差别

4. 第三步就是配置我们的Nginx

    server{
        #gzip
        #开启gzip功能
        gzip on; 
        #开启gzip静态压缩功能
        gzip_static on; 
        #gzip缓存大小
        gzip_buffers 4 16k;
        #gzip http版本
        gzip_http_version 1.1;
        #gzip 压缩级别 1-10 
        gzip_comp_level 5;
        #gzip 压缩类型
        gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; 
        gzip_vary on; 
    }

5. 浏览器输入你的项目地址就可以访问了

vite环境基本配置

import {
    defineConfig,
    normalizePath
} from 'vite'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import ViteRestart from 'vite-plugin-restart'
import timeReporter from 'vite-plugin-time-reporter'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
import envCompatible from 'vite-plugin-env-compatible'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { visualizer } from 'rollup-plugin-visualizer'
import viteImagemin from 'vite-plugin-imagemin'
import viteCompression from 'vite-plugin-compression'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
import Components from 'unplugin-vue-components/vite' // 组件库按需加载
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' // 组件库解析器
import AutoImport from 'unplugin-auto-import/vite'
import ElementPlus from 'unplugin-element-plus/vite'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'


// 全局 scss 文件的路径
// 用 normalizePath 解决 window 下的路径问题
const variablePath = normalizePath(path.resolve('./src/assets/styles/mixin.scss'))

export default defineConfig(({ command, mode }) => {
    // 根据当前工作目录中的 `mode` 加载 .env 文件
    // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
    // const env = loadEnv(mode, process.cwd(), '')

    // 插件
    const plugins = [
        vue(),
        vueJsx(),
        vueSetupExtend(),
        ViteRestart({
            restart: ['my.config.[jt]s']
        }),
        // 按需引入 toast 等样式
        ElementPlus(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
            dts: false,
            include: [
                /\.[j]sx?$/, // .ts, .tsx, .js, .jsx
                /\.vue$/, /\.vue\?vue/ // .vue
            ],
            imports: [
                'vue',
                'vue-router'
            ],
            eslintrc: {
                enabled: true, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成
                filepath: './.eslintrc-auto-import.json', // 生成json文件
                globalsPropValue: true
            }
        }),
        // 按需加载组件库 element-plus
        Components({
            dts: false, // 不生成 components.d
            resolvers: [
                ElementPlusResolver()
            ]
        }),
        // 兼容 commonjs
        viteCommonjs(),
        // 兼容 webpack 环境变量
        envCompatible(),
        createSvgIconsPlugin({
            iconDirs: [
                path.resolve(process.cwd(), 'src/assets/svg')
            ],
            symbolId: 'icon-[name]'
        }),
        viteImagemin({
            gifsicle: {
                optimizationLevel: 7,
                interlaced: false
            },
            optipng: {
                optimizationLevel: 7
            },
            mozjpeg: {
                quality: 20
            },
            pngquant: {
                quality: [0.8, 0.9],
                speed: 4
            },
            svgo: {
                plugins: [
                    {
                        name: 'removeViewBox'
                    },
                    {
                        name: 'removeEmptyAttrs',
                        active: false
                    }
                ]
            }
        }),
        viteCompression(
            {
                algorithm: 'gzip',
                threshold: 10240 // 体积大于 10k 阈值进行压缩，单位 b
                verbose: false,
                deleteOriginFile: true
            }
        ),
        timeReporter(),
        // 包分析插件, 放在最后
        visualizer({
            gzipSize: true,
            brotliSize: true,
            emitFile: false,
            filename: 'stats.html', // 分析图生成的文件名
            open: true // 如果存在本地服务端口，将在打包后自动展示
        })
    ]

    return {
        plugins,
        resolve: {
            alias: [
                {
                    find: '@',
                    replacement: path.resolve(__dirname, 'src')
                },
                {
                    find: '~@',
                    replacement: path.resolve(__dirname, 'src')
                }
            ],
            extensions: [
                '.mjs',
                '.js',
                '.jsx',
                '.vue'
            ]
        },
        // base: './',
        server: {
            strictPort: false,
            port: 8080,
            open: true,
            proxy: {
                '/XXX': {
                    target: 'XXX/',
                    changeOrigin: true
                }
            }
        },
        // css 相关的配置
        css: {
            postcss: {
                plugins: [
                    tailwindcss,
                    autoprefixer
                ]
            },
            preprocessorOptions: {
                scss: {
                    // additionalData 的内容会在每个 scss 文件的开头自动注入
                    additionalData: `@import "${variablePath}";`
                }
            }
        },
        build: {
            outDir: 'dist',
            chunkSizeWarningLimit: 500,
            rollupOptions: {
                output: {
                    chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
                    entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
                    assetFileNames: '[ext]/[name]-[hash].[ext]', // 资源文件像 字体，图片等
                    experimentalMinChunkSize: 10 * 1024, // 单位b 没有副作用，合并较小的模块
                    manualChunks (id) {
                        if (id.includes('/lodash')) {
                            return 'lodash'
                        }
                        if (id.includes('/@vue')) {
                            return 'vue-use'
                        }
                        if (id.includes('/node_modules/')) {
                            return 'vendor'
                        }
                    }
                }
            }
        },
        // 不走打包的，静态资源目录，解决移动目录，出现没有权限
        publicDir: path.resolve(process.cwd(), 'public'),
        optimizeDeps: {
            entries: ['/index.html']
        }
    }
})

Vite 常用配置解释

{
  root: process.cwd(), // 项目根目录（index.html 文件所在的位置）,
  base: '/', // 开发或生产环境服务的公共基础路径 配置引入相对路径
  mode: 'development', // 模式
  plugins: [vue()], // 需要用到的插件数组
  publicDir: 'public', // 静态资源服务的文件夹
  cacheDir: 'node_modules/.vite', // 存储缓存文件的目录
  resolve: {
    alias: [ // 文件系统路径别名
      {
        find: //@//,
        replacement: pathResolve('src') + '/'
      }
    ],
    dedupe: [], // 强制 Vite 始终将列出的依赖项解析为同一副本
    conditions: [], // 解决程序包中 情景导出 时的其他允许条件
    mainFields: [], // 解析包入口点尝试的字段列表
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], // 导入时想要忽略的扩展名列表
    preserveSymlinks: false, // 启用此选项会使 Vite 通过原始文件路径确定文件身份
  },
  css: {
    modules: {
      scopeBehaviour: 'global' | 'local',
      // ...
    },
    postcss: '', // 内联的 PostCSS 配置 如果提供了该内联配置，Vite 将不会搜索其他 PostCSS 配置源
    preprocessorOptions: { // css的预处理器选项
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  },
  json: {
    namedExports: true, // 是否支持从.json文件中进行按名导入
    stringify: false, //  开启此项，导入的 JSON 会被转换为 export default JSON.parse("...") 会禁用按名导入
  },
  esbuild: { // 最常见的用例是自定义 JSX
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  },
  assetsInclude: ['**/*.gltf'], // 指定额外的 picomatch 模式 作为静态资源处理
  logLevel: 'info', // 调整控制台输出的级别 'info' | 'warn' | 'error' | 'silent'
  clearScreen: true, // 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息
  envDir: '/', // 用于加载 .env 文件的目录
  envPrefix: [], // 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中
  server: {
    host: '127.0.0.1', // 指定服务器应该监听哪个 IP 地址
    port: 5000, // 指定开发服务器端口
    strictPort: true, // 若端口已被占用则会直接退出
    https: false, // 启用 TLS + HTTP/2
    open: true, // 启动时自动在浏览器中打开应用程序
    proxy: { // 配置自定义代理规则
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    },
    cors: true, // 配置 CORS
    force: true, // 强制使依赖预构建
    hmr: { // 禁用或配置 HMR 连接
      // ...
    },
    watch: { // 传递给 chokidar 的文件系统监听器选项
      // ...
    },
    middlewareMode: '', // 以中间件模式创建 Vite 服务器
    fs: {
      strict: true, // 限制为工作区 root 路径以外的文件的访问
      allow: [], // 限制哪些文件可以通过 /@fs/ 路径提供服务
      deny: ['.env', '.env.*', '*.{pem,crt}'], // 用于限制 Vite 开发服务器提供敏感文件的黑名单
    },
    origin: 'http://127.0.0.1:8080/', // 用于定义开发调试阶段生成资产的 origin
  },
  build: {
    target: ['modules'], // 设置最终构建的浏览器兼容目标
    polyfillModulePreload: true, // 是否自动注入 module preload 的 polyfill
    outDir: 'dist', // 指定输出路径
    assetsDir: 'assets', // 指定生成静态文件目录
    assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
    cssCodeSplit: true, // 启用 CSS 代码拆分
    cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致
    sourcemap: false, // 构建后是否生成 source map 文件
    rollupOptions: {}, // 自定义底层的 Rollup 打包配置
    lib: {}, // 构建为库
    manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件
    ssrManifest: false, // 构建不生成 SSR 的 manifest 文件
    ssr: undefined, // 生成面向 SSR 的构建
    minify: 'esbuild', // 指定使用哪种混淆器
    terserOptions: {}, // 传递给 Terser 的更多 minify 选项
    write: true, // 启用将构建后的文件写入磁盘
    emptyOutDir: true, // 构建时清空该目录
    brotliSize: true, // 启用 brotli 压缩大小报告
    chunkSizeWarningLimit: 500, // chunk 大小警告的限制
    watch: null, // 设置为 {} 则会启用 rollup 的监听器
  },
  preview: {
    port: 5000, // 指定开发服务器端口
    strictPort: true, // 若端口已被占用则会直接退出
    https: false, // 启用 TLS + HTTP/2
    open: true, // 启动时自动在浏览器中打开应用程序
    proxy: { // 配置自定义代理规则
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    },
    cors: true, // 配置 CORS
  },
  optimizeDeps: {
    entries: [], // 指定自定义条目------该值需要遵循 fast-glob 模式
    exclude: [], // 在预构建中强制排除的依赖项
    include: [], // 可强制预构建链接的包
    keepNames: false, // true 可以在函数和类上保留 name 属性
  },
  ssr: {
    external: [], // 列出的是要为 SSR 强制外部化的依赖,
    noExternal: '', // 列出的是防止被 SSR 外部化依赖项
    target: 'node', // SSR 服务器的构建目标
  }
}

如何测试网页性能？

这里我用的是Lighthouse去测试的,这个功能谷歌浏览器是有集成的，所以直接在浏览器上使用就可以，通过选择你自己想要的指标点击生成报告即可。

• 最后测试部分截图（以下是测试项目的数据）