vite依赖分包

最新推荐文章于 2024-05-10 12:35:45 发布

Humanideal

最新推荐文章于 2024-05-10 12:35:45 发布

阅读量509

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/Humanideal/article/details/133016330

版权

依赖分包的好处

Vite 的依赖预构建（也称为依赖分包）是一种优化手段，主要用于提高开发环境下的页面加载速度。

在传统的打包工具中，每次文件改动都会触发整个应用的重新构建。随着应用规模的增大，构建时间会变得越来越长。而 Vite 则采用了一种不同的方式，它只会对改动的文件进行重新构建，大大提高了更新速度。

然而，即使是 Vite，如果一个模块有很多依赖，那么在开发环境下，浏览器还是需要发送很多请求来获取这些依赖。这就是依赖预构建的用武之地。

在第一次启动 Vite 或者安装新的依赖时，Vite 会自动检测你的项目中的所有依赖，并将它们预构建成优化过的 ES Module 格式。这样，浏览器只需要发送一个请求，就可以获取到所有的依赖，大大提高了页面加载速度。

此外，预构建的依赖还会被缓存起来，除非你安装或者更新了依赖，否则不会再次进行预构建。总的来说，Vite 的依赖预构建可以提高开发环境下的页面加载速度，提升开发体验。

分包流程

1.先安装`terser`

terser 是一个 JavaScript 解析器和压缩器，用于优化和压缩你的代码。Vite 在生产环境下默认使用 terser 进行代码压缩。

你可以通过以下命令来安装 terser：

npm install terser --save-dev

或者

yarn add terser --dev

2.在vite.config.ts里面添加以下逻辑

build: {
    minify: 'terser', // 必须开启：使用 terserOptions 才有效果
    terserOptions: {
      compress: {
        drop_console: process.env.NODE_ENV === 'production' ? true : false,
        drop_debugger: process.env.NODE_ENV === 'production' ? true : false,
      },
    },
    rollupOptions: {
      // 静态资源分类打包
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {},
        chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name]-[hash].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id) {
          // 静态资源分拆打包
          if (id.includes('node_modules')) {
            return id
              .toString()
              .split('node_modules/')[1]
              .split('/')[0]
              .toString()
          }
        },
      },
    },
  },

这段代码是 Vite 的构建配置，主要包含了三个部分：minify，terserOptions 和 rollupOptions。

1. minify: 'terser'`：这个选项用于指定构建时使用的压缩器。在这里，使用的是 terser。

2. terserOptions：这个选项用于配置 terser的行为。在这里，如果环境变量 NODE_ENV`是 production，那么 terser会移除代码中的 console和 debugger。

3. rollupOptions：这个选项用于配置 Rollup 的行为。Rollup 是 Vite 在生产环境下用于打包的工具。

- output：这个选项用于配置输出文件的行为。
- globals：这个选项用于在 UMD 构建模式下为外部依赖提供全局变量。
- chunkFileNames、entryFileNames 和 assetFileNames：这些选项用于配置输出文件的命名规则。在这里，所有的文件都会被放在 static目录下，文件名包含原始名称和哈希值。
- manualChunks：这个函数用于控制代码分割的行为。在这里，所有来自 node_modules的模块都会被打包成单独的文件，文件名是模块的名称。

总的来说，这段代码的作用是在生产环境下，使用 terser 进行代码压缩，移除 console 和 debugger，并且将代码和静态资源打包到 static目录下，所有来自 node_modules的模块都会被打包成单独的文件。