vite

官方文档

为什么选 Vite

• 依赖 Vite 将会使用 esbuild 预构建依赖。esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器（webpack、Rollup 和 Parcel）预构建依赖快 10-100 倍。

• 源码 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。

  Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。

使用插件

@vitejs/plugin-legacy：

Vite默认的浏览器支持基线是 Native ESM, native ESM dynamic import, and import.meta. 该插件为在构建生产时不支持这些功能的旧版浏览器提供支持。

默认情况下，该插件将：

• 为最终包中的每个块生成相应的旧块， 使用 @babel/preset-env 进行转换并作为 SystemJS modules 发出 (仍然支持代码分割!).

• 生成一个polyfill块，包括SystemJS运行时，以及由指定浏览器目标和捆绑包中的 实际使用 确定的任何必要的polyfill.

• 将 <script nomodule> 标签注入生成的 HTML，以便仅在没有广泛可用功能支持的浏览器中有条件地加载 polyfill 和遗留包.

• 注入 import.meta.env.LEGACY 环境变量，该变量仅在旧版生产版本中为 true ，在所有其他情况下为 false .

plugin-legacy插件主要进行以下几个方面的工作：

1. 代码转换（Transpilation）: 使用Babel将ES6+的新特性转换为ES5代码，确保旧版浏览器能够正确执行。
2. Polyfills注入: 根据目标浏览器自动引入必要的polyfills，填补这些浏览器缺少的现代Web API特性。
3. 条件加载: 对于支持module类型script的现代浏览器，它们将直接加载原始的现代代码；而对于不支持的旧浏览器，则会加载被plugin-legacy处理后的兼容代码。
4. 差异化打包: 生成两套代码包，一套是现代代码包，一套是经过转换和添加polyfills后的兼容老浏览器的代码包。
5. 性能优化: 对于大多数用户使用的现代浏览器，它们无需加载和解析兼容旧版浏览器的代码，这样可以加快应用程序的加载和运行速度。

用法

// vite.config.ts
import legacy from '@vitejs/plugin-legacy';

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'], //defaults是 Browserslist 默认值的一个别名。通常意味着支持> 0.5%市场份额的全球浏览器，以及所有严肃浏览器的最新两个版本，并确保支持已经全球规范化的网页技术。
      modernPolyfills: ['es/global-this'], // 查阅core-js文档以获取相应的模块名称
    }),
  ],
};

必须安装 Terser，因为plugin-legacy使用 Terser 进行缩小。

npm add -D terser

vite-plugin-pwa：

学习文档：https://web.dev/learn/pwa/

MDN：渐进式 Web 应用（PWA）

用法

// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';

export default {
  plugins: [
    VitePWA({
      // registerType: 'autoUpdate',
      includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
      manifest: {
        name: 'Vue Typescript Admin',
        // eslint-disable-next-line camelcase
        short_name: 'Vue Ts Admin',
        description: 'Description of your app',
        // eslint-disable-next-line camelcase
        theme_color: '#4DBA87',
        icons: [
          {
            src: 'img/icons/android-chrome-192x192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: 'img/icons/android-chrome-512x512.png',
            sizes: '512x512',
            type: 'image/png',
          },
          {
            src: 'img/icons/android-chrome-512x512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'any maskable',
          },
        ],
      },
    }),
  ],
};