vite学习记录 - 翔子的博客

概念#

vite开发阶段是esbuild，构建阶段是rollup

以前浏览器不支持ES Modules，所以es6代码都是通过打包工具转成浏览器识别的语言才能正常工作

带来的问题是：

当项目越来越大时，启动项目需要很长时间（经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码）
代码更新也需要时间（HMR 时需要把改动模块及相关依赖全部编译）

vite如何解决这两个问题？#

针对项目启动慢的问题，vite 在开发环境冷启动无需打包，无需分析模块之间的依赖，同时也无需在启动开发服务器前进行编译，vite启动时将代码分为依赖和源码

依赖：指的是一些不变的东西。例如第三方库，这部分使用esbuild构建（go语言开发，比js编写的打包器预构建依赖快10-100倍）

源码：项目代码，按需加载，并且以es moduel的方式直接交给浏览器
针对项目更新的问题，vite只需要更新改动的源码位置，依赖不需要重新加载

源码部分根据协商缓存，依赖模块直接强缓存

配置#

以下配置是我在项目中使用的配置

vite创建项目

1
npm init vite@latest my-vue-app
2

3
# 使用pnpm
4
pnpm create vite my-vue-app --template vue-ts

配置vite.config.ts

path等node变量不生效时，安装ts-node 缺少node类型定义
Terminal window
```
1
yarn add ts-node --dev
2
yarn add @types/node --dev
```

组件编写，想在当前组件中创建example文件夹测试当前组件

vite.config.ts配置

1
import { defineConfig } from 'vite'
2
import react from '@vitejs/plugin-react';
3
import * as path from 'path';
4

5
// https://vitejs.dev/config/
6
export default defineConfig({
7
  resolve: {
8
    alias: {
9
      '@example': path.resolve('example'),
10
      '@': path.resolve(__dirname, './src'),
11
      // 确保example可以成功找到quick-email-editor
12
      'quick-email-editor': path.resolve(__dirname, './src/main.tsx'),
13
    },
14
  },
15
  plugins: [react()],
16
  build: {
17
    minify: true,
18
    manifest: true,
19
    sourcemap: true,
20
    target: 'es2015',
21
    rollupOptions: {
22
      output: {
23
        manualChunks(id) {
24
          if (/^\/src\/.*/.test(id)) {
25
            return 'quick-email-editor';
26
          }
27
          if (/^\/example\/.*/.test(id)) {
28
            return 'demo';
29
          }
30
        },
31
      },
32
    },
33
  },
34
})

index.html配置

1
<!-- 找到最外层HTML文件 -->
2
<!DOCTYPE html>
3
<html lang="en">
4
  <head>
5
    <meta charset="UTF-8" />
6
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
7
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
    <title>Vite App</title>
9
  </head>
10
  <body>
11
    <div id="root"></div>
12
    <!-- 将此行隐藏 使用下面的文件  -->
13
    <!--<script type="module" src="/src/main.tsx"></script>-->
14
    <script type="module" src="/example/index.tsx"></script>
15
  </body>
16
</html>

打包分析 rollup-plugin-visualize

1
yarn add rollup-plugin-visualizer --dev

vite.config.js配置

1
process.env.ANALYZE === "true" &&
2
      visualizer({
3
        open: true,
4
        gzipSize: true,
5
        brotliSize: true,
6
      }),

package.json配置

1
"analyze": "cross-env ANALYZE=true yarn lib",
2
"analyze:build": "cross-env ANALYZE=true yarn build",

预览preview

package.json配置

1
"preview": "npm run lib && vite --config vite.preview.config.ts --force",

vite.lib.config.js配置

1
plugins: [
2
    {
3
      ...typescript2({
4
        check: false,
5
        tsconfig: 'tsconfig.lib.json',
6
      }),
7
      apply: 'build',
8
    },
9
    process.env.ANALYZE === 'true' &&
10
    visualizer({
11
      open: true,
12
      gzipSize: true,
13
      brotliSize: true,
14
    }),
15
  ],

编译生成.d.ts文件

要确保tsconfig.json存在declaration

1
{
2
  "compilerOptions": {
3
    "target": "ESNext",
4
    "useDefineForClassFields": true,
5
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
6
    "allowJs": false,
7
    "skipLibCheck": true,
8
    "esModuleInterop": false,
9
    "allowSyntheticDefaultImports": true,
10
    "strict": true,
11
    "forceConsistentCasingInFileNames": true,
12
    "module": "ESNext",
13
    "moduleResolution": "Node",
14
    "resolveJsonModule": true,
15
    "isolatedModules": true,
16
    "noEmit": true,
17
    # 是否生成声明文件
18
    "declaration": true,
19
    "jsx": "react-jsx"
20
  },
21
  "include": ["src"],
22
  "references": [{ "path": "./tsconfig.node.json" }]
23
}

安装typescript2

1
yarn add rollup-plugin-typescript2 typescript tslib --dev

配置

1
plugins: [
2
    {
3
      ...typescript2({
4
        check: false,
5
        # 默认加载tsconfig.json
6
        tsconfig: 'tsconfig.lib.json',
7
      }),
8
      apply: 'build',
9
    },
10
    process.env.ANALYZE === 'true' &&
11
    visualizer({
12
      open: true,
13
      gzipSize: true,
14
      brotliSize: true,
15
    }),
16
  ],

静态文件还在public下，打包的时候会直接copy

vite进度条插件

1
yarn add progress vite-plugin-progress -D

1
import progress from 'vite-plugin-progress'
2
import colors from 'picocolors'
3
...
4

5
plugins: [
6
    {
7
      ...typescript2({
8
        check: false,
9
        tsconfig: 'tsconfig.lib.json',
10
      }),
11
      apply: 'build',
12
    },
13
    process.env.ANALYZE === 'true' &&
14
    visualizer({
15
      open: true,
16
      gzipSize: true,
17
      brotliSize: true,
18
    }),
19
    progress({
20
      format:  `${colors.green(colors.bold('Bouilding'))} ${colors.cyan('[:bar]')} :percent`
21
    })
22
  ],
23
  ...

实现思路：

webpack有对应的插件webpackBar，实现思路：webpack.progressPlugin事件钩子，可轻松获取进度 vite基于rollup打包，不知道进度

第一次打包时，模拟并记录所有模块总数并缓存起来

静态资源处理
- 默认在public下的文件不打包
- 引用：public/icon.png应该在代码中引用为/icon.png
new URL(url, import.meta.url)

import.meta可以获取模块上的元数据属性
```
1
console.log(import.meta.env);
2
console.log(import.meta.hot);
3
console.log(import.meta.url);
```
与URL构造器组合使用可以通过相对路径得到一个被完整解析的静态资源URL
```
1
console.log(new URL('./sample.json', import.meta.url));
```

vite配置Emotion

1
npm install @emotion/react
2
npm install -D @emotion/babel-plugin

修改vite.config.js文件

1
export default defineConfig({
2
  plugins: [
3
    react({
4
      jsxImportSource: '@emotion/react',
5
      babel: {
6
        // 利用emotion的babel插件为JSX加入css属性，这样不用每个jsx文件开头添加JSX Pragma了
7
        plugins: ['@emotion/babel-plugin']
8
      },
9
    }),
10
  ],
11
});

持续更新中。。。

音乐

音乐

概念#

vite如何解决这两个问题？#

配置#

音乐

文章目录