运行jeecgboot-vue3我的项目可能呈现的问题

1. 执行pnpm install的时候报错

ERR_PNPM_INVALID_OVERRIDE_SELECTOR  Cannot parse the "//" selector in the overrides

翻译:在overrides外面无奈解析"//"
这个问题在issue中能找到, 解决办法如下:

-1. 删除无奈解析的"//",
-2. pnpm降级到6.23.6(没试,不想降级)

这是pnpm在读package.json中的配置时呈现的问题,pnpm.overrides或者resolutions存在"//",抉择删掉,因为依赖源抉择好了,在国内应该都有镜像

pnpm.overrides 和 yarn 提供的resolutions 作用相似:指定依赖版本笼罩所有依赖及子依赖。 (npm能够间接装置指定版本)
resolutions在遇到某些子依赖高版本有bug的时候,固定所有子依赖的版本有用
package.json"resolutions": {   "//": "Used to install imagemin dependencies, because imagemin may not be installed in     China. If it is abroad, you can delete it",   "bin-wrapper": "npm:bin-wrapper-china",   "rollup": "^2.56.3",   "gifsicle": "5.2.0" },

3. pnpm益处:

  1. 全局装置,专用依赖,同名包同版本只会下载一次,晋升速度
  2. 我的项目中只会展现一级依赖,不会引入你不晓得的子级依赖(npm将依赖拍平以缩小反复包的下载)

4. 对于npm下载依赖esbuild报错的问题throw new Error(`esbuild: Failed to install correctly

网上有很多文章解决esbuild装置问题,就是执行node node_modules/esbuild/install.js装置后,再跑就能够了。

这里我提一点,不要无脑复制粘贴,要看你的esbuild的报错门路

以下的报错门路就是另外一个依赖外面的报错

 at Object.<anonymous> (/Users/ruios/web/vue-vben-admin-main/node_modules/vite-plugin-mock/node_modules/esbuild/bin/esbuild:2:7)

依据目录找到文件夹,的确外面外面也有一个esbuild
所以执行以下

node node_modules/vite-plugin-mock/node_modules/esbuild/install.js

再次运行就ok了

5. 提醒build.terserOptions is specified but build.minify is not set to use Terser. Note Vite now defaults to use esbuild for minification. If you still prefer Terser, set build.minify to "terser".

  1. 在vite.config.js中有打包配置terserOptions为了去掉console,从提醒能够看进去,当初Vite默认应用esbuild去作为代码压缩器,如果想要应用terserOptions这些配置,要减少minify:terser。
    看文档默认esbuild压缩有劣势,那也能够删掉terserOptions

    1. minify: 编译优化伎俩,指在不影响代码语义的状况下,尽可能的减小程序的体积,常见的minify工具如terser、uglify,swc和esbuid也自带minify性能
    2. 发现并不失效,起初查问是minify配置esbuild的问题,配置成terser混同器就能够了 , 网上对于minify的默认值有不统一的说法,官网的默认值是esbuild,而通过理论验证,它的默认值应该是terser
  2. 相干参数:

           1. compress:(默认`{}`)-通过`false`以齐全跳过压缩。传递一个对象以指定自定义[压缩选项](https://terser.org/docs/api-reference#compress-options)。       2. compress.keep_infinity:(默认值:`false`)-通过`true`以避免`Infinity`被压缩为`1/0`,这可能会导致Chrome呈现性能问题。       3. compress.drop_console:(默认值:`false`)-传递`true`以放弃对`console.*`函数的调用 。如果您心愿在删除函数调用后删除特定的函数调用,例如`console.info`和/或保留函数自变量的副作用,请`pure_funcs`改用。

批改前代码:

vite.config.js  build: {      target: 'es2015',      outDir: OUTPUT_DIR,      terserOptions: {        compress: {          keep_infinity: true,          // Used to delete console in production environment          drop_console: VITE_DROP_CONSOLE,        },      },      // Turning off brotliSize display can slightly reduce packaging time      brotliSize: false,      chunkSizeWarningLimit: 2000,    },

批改后代码:

    build: {      minify: 'terser',      // 进行压缩计算      brotliSize: false,      target: 'es2015',      // 【VUEN-872】css编译兼容低版本chrome内核(例如360浏览器)      cssTarget: 'chrome80',      outDir: OUTPUT_DIR,      terserOptions: {        compress: {          keep_infinity: true,          // Used to delete console in production environment          // 打包主动删除console          drop_console: VITE_DROP_CONSOLE,          drop_debugger: true,        },      },      // Turning off brotliSize display can slightly reduce packaging time      chunkSizeWarningLimit: 2000,    },

6. vite.config.js中有一个配置optimizeDeps

该配置的目标:

  1. 兼容 CommonJS 和 AMD 模块的依赖(下图中needsInterop标记为true就是要重写CommonJS的导出)
    因为 Vite 的 DevServer 是基于浏览器的 Natvie ES Module 实现的,所以对于应用的依赖如果是 CommonJS 或 AMD 的模块,则须要进行模块类型的转化(ES Module)
  2. 缩小模块间依赖援用导致过多的申请次数,放慢启动速度
    预编译后会将dependencies的依赖和optimizeDeps.include中的依赖进行预编译缓存,并生成存储的门路文件node_moduels/.vite/_metadata.json

为了放慢二次及后续编译速度,本人写optimizeDeps比拟麻烦,这里到npm上看看用起来吧:vite-plugin-optimize-persist

诚实讲:vite我的项目页面略微多一丢丢货色,开发体验时首次加载页面真的慢。不过有了第一次,前面还是难受

7. vite(esbuild + rollup)

对于esbuild的优良,网上有很多构建劣势比照图,甩webpack一条街。

Vite 用 esbuild 代替 Rollup 进行预打包,速度也十分快,下面的第三点能够看到生产能够用 esbuild 作为压缩器。生产打包还是用的Rollup, esbuild 目前对生产包反对不够强壮,很多配置无奈通过 esbuild 实现

8. 运行正告提醒WARN [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

Vue 正告代码

::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

解决方案

应用 :deep() 替换 ::v-deep

.carousel {  // Vue 2.0 写法  // ::v-deep .carousel-btn.prev {  //    left: 270px;  //  }  // Vue 3.0 更改为以下写法  :deep(.carousel-btn.prev) {    left: 270px;  }}