vite.config.optimize.ts 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. import { resolve } from 'path'
  2. import type { ConfigEnv, UserConfig } from 'vite'
  3. import { loadEnv } from 'vite'
  4. import { createVitePlugins } from './build/vite'
  5. import { exclude, include } from "./build/vite/optimize"
  6. import os from 'os'
  7. // 当前执行node命令时文件夹的地址(工作目录)
  8. const root = process.cwd()
  9. // 路径查找
  10. function pathResolve(dir: string) {
  11. return resolve(root, '.', dir)
  12. }
  13. // https://vitejs.dev/config/
  14. export default ({ command, mode }: ConfigEnv): UserConfig => {
  15. let env = {} as any
  16. const isBuild = command === 'build'
  17. if (!isBuild) {
  18. env = loadEnv((process.argv[3] === '--mode' ? process.argv[4] : process.argv[3]), root)
  19. } else {
  20. env = loadEnv(mode, root)
  21. }
  22. // 获取CPU核心数
  23. const cpuCount = os.cpus().length
  24. const maxWorkers = Math.min(4, Math.max(1, Math.floor(cpuCount / 2)))
  25. return {
  26. base: env.VITE_BASE_PATH,
  27. root: root,
  28. // 优化开发服务器
  29. server: {
  30. port: env.VITE_PORT,
  31. host: "0.0.0.0",
  32. open: env.VITE_OPEN === 'true',
  33. hmr: {
  34. overlay: false // 禁用错误遮罩层
  35. }
  36. },
  37. // 项目使用的vite插件
  38. plugins: [
  39. createVitePlugins()
  40. // 生产环境禁用可视化分析器以节省资源
  41. ],
  42. css: {
  43. preprocessorOptions: {
  44. scss: {
  45. additionalData: '@use "@/styles/variables.scss" as *;',
  46. javascriptEnabled: true,
  47. silenceDeprecations: ["legacy-js-api"]
  48. }
  49. }
  50. },
  51. resolve: {
  52. extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss', '.css'],
  53. alias: [
  54. {
  55. find: 'vue-i18n',
  56. replacement: 'vue-i18n/dist/vue-i18n.cjs.js'
  57. },
  58. {
  59. find: /@\//,
  60. replacement: `${pathResolve('src')}/`
  61. }
  62. ]
  63. },
  64. build: {
  65. minify: 'terser',
  66. outDir: env.VITE_OUT_DIR || 'dist',
  67. sourcemap: false, // 禁用sourcemap节省内存
  68. reportCompressedSize: false, // 禁用压缩大小报告
  69. // 优化构建目标
  70. target: 'es2015',
  71. cssTarget: 'chrome61',
  72. // 优化压缩选项
  73. terserOptions: {
  74. compress: {
  75. drop_debugger: true,
  76. drop_console: true,
  77. ecma: 2020,
  78. passes: 1, // 减少压缩轮次
  79. // 禁用一些耗内存的压缩选项
  80. pure_funcs: [],
  81. reduce_funcs: false,
  82. reduce_vars: false,
  83. unsafe: false,
  84. unsafe_comps: false,
  85. unsafe_math: false,
  86. unsafe_proto: false,
  87. unsafe_regexp: false
  88. },
  89. format: {
  90. comments: false
  91. },
  92. maxWorkers: maxWorkers // 根据CPU核心数限制工作线程
  93. },
  94. chunkSizeWarningLimit: 3000, // 提高警告阈值
  95. rollupOptions: {
  96. // 优化外部依赖处理
  97. external: [],
  98. // 优化输出配置
  99. output: {
  100. // 智能分包策略
  101. manualChunks: (id: string) => {
  102. if (id.includes('node_modules')) {
  103. // 大型库单独打包
  104. if (id.includes('@grapecity-software')) {
  105. return 'vendor-grapecity';
  106. }
  107. if (id.includes('echarts')) {
  108. return 'vendor-echarts';
  109. }
  110. if (id.includes('element-plus')) {
  111. return 'vendor-element-plus';
  112. }
  113. if (id.includes('vue') || id.includes('@vue')) {
  114. return 'vendor-vue';
  115. }
  116. if (id.includes('lodash')) {
  117. return 'vendor-lodash';
  118. }
  119. // 其他第三方库统一打包
  120. return 'vendor';
  121. }
  122. },
  123. // 优化文件命名和路径
  124. chunkFileNames: 'assets/js/[name]-[hash:8].js',
  125. entryFileNames: 'assets/js/[name]-[hash:8].js',
  126. assetFileNames: 'assets/[ext]/[name]-[hash:8].[ext]',
  127. // 优化缓存
  128. hoistTransitiveImports: false,
  129. sanitizeFileName: true
  130. },
  131. // 优化treeshaking
  132. treeshake: {
  133. moduleSideEffects: false,
  134. preset: 'smallest'
  135. }
  136. },
  137. // 优化依赖预构建
  138. commonjsOptions: {
  139. transformMixedEsModules: true,
  140. ignoreDynamicRequires: true
  141. },
  142. // 优化动态导入
  143. dynamicImportVarsOptions: {
  144. warnOnError: true
  145. }
  146. },
  147. optimizeDeps: {
  148. include,
  149. exclude,
  150. // 优化预构建
  151. esbuildOptions: {
  152. target: 'es2015',
  153. minify: false // 预构建不压缩,节省内存
  154. }
  155. },
  156. // 优化esbuild配置
  157. esbuild: {
  158. target: 'es2015',
  159. /// minify: false, // 禁用esbuild压缩,使用terser
  160. keepNames: false,
  161. drop: ['debugger', 'console']
  162. }
  163. }
  164. }