index.ts 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. import { PluginOption } from 'vite';
  2. import vue from '@vitejs/plugin-vue';
  3. import vueJsx from '@vitejs/plugin-vue-jsx';
  4. import legacy from '@vitejs/plugin-legacy';
  5. import purgeIcons from 'vite-plugin-purge-icons';
  6. import windiCSS from 'vite-plugin-windicss';
  7. import VitePluginCertificate from 'vite-plugin-mkcert';
  8. import vueSetupExtend from 'vite-plugin-vue-setup-extend';
  9. import { configHtmlPlugin } from './html';
  10. import { configPwaConfig } from './pwa';
  11. import { configMockPlugin } from './mock';
  12. import { configCompressPlugin } from './compress';
  13. import { configStyleImportPlugin } from './styleImport';
  14. import { configVisualizerConfig } from './visualizer';
  15. import { configThemePlugin } from './theme';
  16. import { configImageminPlugin } from './imagemin';
  17. import { configSvgIconsPlugin } from './svgSprite';
  18. import OptimizationPersist from 'vite-plugin-optimize-persist';
  19. import PkgConfig from 'vite-plugin-package-config';
  20. import { resolve } from 'path';
  21. import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
  22. import topLevelAwait from 'vite-plugin-top-level-await';
  23. export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
  24. const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE } = viteEnv;
  25. const vitePlugins: (PluginOption | PluginOption[])[] = [
  26. // have to
  27. vue(),
  28. // have to
  29. vueJsx(),
  30. // support name
  31. vueSetupExtend(),
  32. // @ts-ignore
  33. VitePluginCertificate({
  34. source: 'coding',
  35. }),
  36. createSvgIconsPlugin({
  37. // 指定需要缓存的图标文件夹
  38. iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
  39. // 指定symbolId格式
  40. symbolId: 'svg-[name]',
  41. // 禁用压缩 否则想要修改无状态组件的stroke或者fill会影响到预设样式 例如stroke-width
  42. svgoOptions: false,
  43. customDomId: '__webtopo__svgpreview__icons__dom__',
  44. }),
  45. topLevelAwait({
  46. // The export name of top-level await promise for each chunk module
  47. promiseExportName: '__tla',
  48. // The function to generate import names of top-level await promise in each chunk module
  49. promiseImportName: i => `__tla_${i}`
  50. })
  51. ];
  52. // vite-plugin-windicss
  53. vitePlugins.push(windiCSS());
  54. // @vitejs/plugin-legacy
  55. VITE_LEGACY && isBuild && vitePlugins.push(legacy());
  56. // vite-plugin-html
  57. vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
  58. // vite-plugin-svg-icons
  59. vitePlugins.push(configSvgIconsPlugin(isBuild));
  60. // vite-plugin-mock
  61. VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild));
  62. // vite-plugin-purge-icons
  63. vitePlugins.push(purgeIcons());
  64. // vite-plugin-style-import
  65. vitePlugins.push(configStyleImportPlugin(isBuild));
  66. // rollup-plugin-visualizer
  67. vitePlugins.push(configVisualizerConfig());
  68. // vite-plugin-theme
  69. vitePlugins.push(configThemePlugin(isBuild));
  70. // The following plugins only work in the production environment
  71. if (isBuild) {
  72. // vite-plugin-imagemin
  73. VITE_USE_IMAGEMIN && vitePlugins.push(configImageminPlugin());
  74. // rollup-plugin-gzip
  75. vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS, VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE));
  76. // vite-plugin-pwa
  77. vitePlugins.push(configPwaConfig(viteEnv));
  78. }
  79. //vite-plugin-theme【解决vite首次打开界面加载慢问题】
  80. vitePlugins.push(PkgConfig());
  81. vitePlugins.push(OptimizationPersist());
  82. return vitePlugins;
  83. }