[Vie] 依赖预构建

使用Vite模板vue-ts. https://github.com/vitejs/vite/tree/main/packages/create-vite

 

 

一个组件在没加入Lodash之前：

当加入lodash之后，会自动把它加入到.vite/deps中去：

 

假如不用依赖构建

vite.config.ts

  return {
    plugins: [vue()],
    // ...
    optimizeDeps: {
      exclude: ['lodash-es']
    }
  }

可以看到，lodash已经从.vite/deps中被移除了

在网页加载的时候形成了瀑布流问题。

 

利用esbuild来简单的实现

pnpm add esbuild -D

prebundle.cjs

const esbuild = require('esbuild');

//用户存放扫描到的第三方依赖包的名称
const deps = [];

//扫描插件
function depScanPlugin(deps) { 
  return {
    name: 'esbuild-dep-scan',
    setup(build) { 
      // 正则表达式，简单判断所有不以.开头的路径都是第三方依赖
      build.onResolve({ filter: /^[^\.]/ }, args => {
        // 将扫描到的第三方依赖包名称存入deps数组中
        deps.push(args.path);
      })
    }
  }
}
//进行依赖扫描
(async () => {
  await esbuild.build({
    // 依赖预构建扫描不需要写入文件
    write: false,
    entryPoints: ['src/index.js'],
    //是否需要打包
    bundle: true,
    outdir: './dist',
    loader: {
      '.js': 'jsx',
      '.svg': 'dataurl',
      '.png': 'file'
    },
    plugins: [depScanPlugin(deps)]
  });


  await esbuild.build({
    // 入口文件就是上面扫描的地址
    entryPoints: deps,
    write: true,
    bundle: true,
    format: 'esm', 
    outdir:'./node_modules/.vite/deps',
  })
})();

• 先扫描文件，把所有第三方库加到deps数组中去
• 然后写入到把第三方库的bundle写入到'./node_modules/.vite/deps'中