为什么需求分包战略？

敞开生长之旅！这是我参加「日新计划 12 月更文挑战」的第16天，点击查看活动概况

浏览器的缓存战略

浏览器在恳求静态资源时，只需静态资源的称号不变，它就不会从头恳求 xxx.js资源。

使用Vite打包后的js文件是带有哈希值的，只需咱们的代码内容有一点点改动，那么文件的hash值都会改动。

咱们初始化一个项目，安装vite进行演示

npm init -y
npm i vite -D

// main.js中写一点逻辑
const mainArr = []

打包

Vite功能优化之分包战略

更改main.js中的逻辑然后从头打包

// 更改main.js中的逻辑
let mainArr = []

Vite功能优化之分包战略

可见，项目中任何事务代码更改后，文件的hash值都会改动，从头部署代码后，浏览器都会从头恳求资源文件。

基于这种战略，服务器往往存在不必要的功能糟蹋。

浏览器缓存战略的不足

假设咱们的项目修改了一点点事务逻辑，每次 打包发布后，由于打包的文件名发生了改动，浏览器都会从头恳求这个js文件。

看个示例：

咱们引入lodash，然后main.js中写入一点逻辑。

import { forEach } from "lodash"
const mainArr = []
forEach(mainArr,(ele) => {
  console.log('ele: ', ele);
})

打包

Vite功能优化之分包战略

main.js中修改了一点点内容，从头打包

Vite功能优化之分包战略

注：为了展现源码，这儿关闭了打包时的代码压缩。vite.config.js中装备build:{minify:false}

通过这个示例咱们能够发现个问题，咱们引入了lodash，虽然它的内容始终没有变（大概有5481行的代码），可是随着事务代码的一点点修改，它都会和事务代码打包在一起，被浏览器从头恳求。

这是糟蹋功能的，lodash完全没有必要被从头恳求。假如咱们将lodash和事务代码打包成两个独立的js文件，就能够完美解决这个问题。这便是分包战略。

分包战略便是把一些不会经常更新的文件，进行单独打包处理。

分包战略的完结

vite中完结分包战略，实际是靠装备rollup的打包装备完结的。

// vite.config.js
import { defineConfig } from "vite";
export default defineConfig({
  build:{
    // 在这儿装备打包时的rollup装备
    rollupOptions:{
    }
  }
});

rollup的output.manualChunks这一装备能够完结分包战略，具体内容能够查看官网:

www.rollupjs.com/guide/big-l…

output.manualChunks

官方注解：

当该选项值为函数形式时，每个被解析的模块都会通过该函数处理。假如函数回来字符串，那么该模块及其一切依赖将被添加到以回来字符串命名的自定义 chunk 中。例如，以下比如会创建一个命名为 vendor 的 chunk，它包含一切在 node_modules 中的依赖。

manualChunks(id) {
  if (id.includes('node_modules')) {
    return 'vendor';
  }
}

咱们打印一下manualChunks函数的参数

import { defineConfig } from "vite";
export default defineConfig({
  build:{
    minify:false,
    // 在这儿装备打包时的rollup装备
    rollupOptions:{
      manualChunks:(id) => {
        console.log("id-------------",id);
      }
    }
  }
});

Vite功能优化之分包战略

能够看出，id对应的便是一切需求打包整合的文件，假如id包含node_modules，必定不是咱们的事务代码，根据官方释义，咱们能够将包含node_modules的文件打包在一起

import { defineConfig } from "vite";
export default defineConfig({
  build:{
    minify:false,
    // 在这儿装备打包时的rollup装备
    rollupOptions:{
      manualChunks:(id) => {
        if (id.includes('node_modules')) {
          return 'vendor';
        }
      }
    }
  }
});

从头打包后，能够发现分包战略已经完结了。

Vite功能优化之分包战略