[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'中