• vite 预编译之后，将文件缓存在 node_modules/.vite/ 文件夹下

  CommonJs to ESM

  vite 预编译时，将非 esModule 的引入，编译成 esModule 文件

如果不预编译 CommonJs 模块，会报错,比如 react 采用的是 commonJs 模块

• 修改 vite.config.js

  export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    // 预编译哪些文件
    include: [],
    // 哪些文件不预编译
    exclude: ["react"],
  },
  });

• 运行项目在浏览器查看

  Uncaught SyntaxError: The requested module '/node_modules/react/index.js?v=da303a27' does not provide an export named 'useState'

  bundle files together

  把文件打包到一起

• 比如 lodash-es 库，分成很多个文件，如果不进行打包，会在网络中产生很多个请求

• 修改 vite.config.js

  export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    // 预编译哪些文件
    // include: [],
    // 哪些文件不预编译
    exclude: ["lodash-es"],
  },
  });

• 引入一个函数

  import { throttle } from "lodash-es";
  console.log(throttle);

• 网络中加载了很多 loadsh-es 相关模块，造成浏览器卡顿

• 我们使用 vite 的缓存，会把 lodash-es 的模块打包到一个文件夹中

浏览器中只会加载一个文件，并且缓存第三发库