Vite-优化篇

代码分割

单 chunk 打包存在的问题

Vite 默认会将 js 打包到一个 index.js 文件中，即单 chunk 打包。

这样其实会导致一些问题

1. 包体积会很大，当前没使用的包也被打包进去了，没办法做到按需加载。
2. 缓存复用率很低，单 chunk 打包基本上不会命中缓存，因为只要改动就重新打包，打包后的 url 改变，浏览器会当作新的资源去请求。

自定义拆包

配置 manualChunks

// vite.config.ts
export default defineConfig({
    // ...
    build: {
        rollupOptions: {
            output: {
                manualChunks: {
                    // React 相关库打包
                    "react-vendor": ["react", "react-dom"],
                    // Lodash 库打包
                    "lodash": ["lodash-es"],
                    // 组件库打包
                    "library": ["antd"],
                    // Moment 库打包
                    "moment": ["moment"]
                },
            },
        }
    },
});

对 manualChunks 进行配置，key 代表 chunk 的名称， value 是第三方包的包名的数组。

可以清楚看到原来的一个大的 chunk 被拆分成多个 chunk ，当更新时，也只更新其中一个 chunk ，其他的 chunk 则会读取缓存，提高了缓存命中率。

使用插件

首先安装

pnpm i vite-plugin-chunk-split -D

使用

import { chunkSplitPlugin } from "vite-plugin-chunk-split";

export default defineConfig({
    plugins: [
        chunkSplitPlugin({
            // 指定拆包策略
            customSplitting: {
                // 1. 支持填包名。
                "react-vendor": ["react", "react-dom"],
                // 2. 支持填正则表达式。src 中 components 和 utils 下的所有文件被会被打包为`component-util`
                "components-util": [/src\/components/, /src\/utils/],
                "lodash": ["lodash-es"],
                "library": ["antd"],
                "moment": ["moment"]
            }
        }),
        // ...
    ],
});

语法降级 和 Polyfill

简单来说就是低版本的浏览器对一些JS代码无法识别，需要对JS语法进行降级，详细定义：Polyfill

插件

安装官方插件

pnpm i @vitejs/plugin-legacy -D

使用插件

export default defineConfig({
    plugins: [
        chunkSplitPlugin({
            // 指定拆包策略
            customSplitting: {
                // 1. 支持填包名。`react` 和 `react-dom` 会被打包到一个名为`render-vendor`的 chunk 里面(包括
                "react-vendor": ["react", "react-dom"],
                // 2. 支持填正则表达式。src 中 components 和 utils 下的所有文件被会被打包为`component-util`
                "components-util": [/src\/components/, /src\/utils/],
                "lodash": ["lodash-es"],
                "library": ["antd"],
                "moment": ["moment"]
            }
        }),
    ],
});

执行打包

pnpm run build

在 dist 目录下的 index.html 可以看到

<script type="module">...</script>
<script nomodule>...</script>

当使用现代浏览器时加载 type=”module” 的 script，当使用低版本的浏览器加载 nomodule 的 script，这样就能够对低版本浏览器进行兼容了。

网络优化

使用 HTTP2

插件 vite-plugin-mkcert

1. 安装

   pnpm i vite-plugin-mkcert -D

2. 配置

   export default defineConfig({
      plugins: [react(), mkcert()],
      server: {
        https: true,
      },
   });

DNS 预解析

资源优化

使用 rollup-plugin-visualizer 对打包的产物进行分析

pnpm i  rollup-plugin-visualizer -D

配置

export default defineConfig({
   plugins: [
      visualizer({
         open: true,
      }),
   ],
});

执行打包后会自动带开浏览器

图片压缩

如果项目存在图片的静态文件，在打包时一定会增加包的大小，一般情况下我们需要在打包时对图片进行压缩处理

一个 Vite 插件 vite-plugin-imagemin 可以帮我们来做这件事

安装

pnpm i vite-plugin-imagemin -D

配置

export default defineConfig({
    plugins: [
        // ...
        viteImagemin({
            // 无损压缩配置
            optipng: {
                optimizationLevel: 7
            },
            // 有损压缩配置
            pngquant: {
                quality: [0.8, 0.9],
            },
            // svg 优化
            svgo: {
                plugins: [
                    {
                        name: "removeViewBox"
                    },
                    {
                        name: "removeEmptyAttrs",
                        active: false
                    }
                ]
            }
        })
    ],
});

然后执行 build

pmpm run build

控制台可以看到我们的配置生效了

gzip

gzip 可以对我们的代码体积进行压缩，提高性能

1. 安装插件

   pnpm i vite-plugin-compression -D

2. 配置

import viteCompression from "vite-plugin-compression";

export default defineConfig({
	plugins: [
        // ...
		viteCompression()
	],
});