From b476e1c84c52dab7030fd19b34ecd33e65fadcb2 Mon Sep 17 00:00:00 2001
From: Vben <anncwb@126.com>
Date: 星期一, 01 三月 2021 23:01:37 +0800
Subject: [PATCH] fix: ensure that the correct components are dynamically imported
---
vite.config.ts | 231 +++++++++++++++++++++++++--------------------------------
1 files changed, 100 insertions(+), 131 deletions(-)
diff --git a/vite.config.ts b/vite.config.ts
index e410d58..4a73538 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,143 +1,112 @@
-import type { UserConfig } from 'vite';
+import type { UserConfig, ConfigEnv } from 'vite';
+import { loadEnv } from 'vite';
import { resolve } from 'path';
-import { modifyVars } from './build/config/lessModifyVars';
+import { generateModifyVars } from './build/config/themeConfig';
import { createProxy } from './build/vite/proxy';
-import globbyTransform from './build/vite/plugin/context/transform';
-
-import { isDevFn, loadEnv } from './build/utils';
-
-import { createRollupPlugin, createVitePlugins } from './build/vite/plugin';
-
-const pkg = require('./package.json');
-
-const viteEnv = loadEnv();
-
-const {
- VITE_PORT,
- VITE_PUBLIC_PATH,
- VITE_PROXY,
- VITE_DROP_CONSOLE,
- // VITE_USE_CDN,
-} = viteEnv;
+import { wrapperEnv } from './build/utils';
+import { createVitePlugins } from './build/vite/plugin';
+import { OUTPUT_DIR } from './build/constant';
function pathResolve(dir: string) {
return resolve(__dirname, '.', dir);
}
-const viteConfig: UserConfig = {
- /**
- * Entry. Use this to specify a js entry file in use cases where an
- * `index.html` does not exist (e.g. serving vite assets from a different host)
- * @default 'index.html'
- */
- // TODO build error
- // entry: './public/index.html',
- /**
- * port
- * @default '3000'
- */
- port: VITE_PORT,
- /**
- * @default 'localhost'
- */
- hostname: 'localhost',
- /**
- * Run to open the browser automatically
- * @default 'false'
- */
- open: false,
- /**
- * Set to `false` to disable minification, or specify the minifier to use.
- * Available options are 'terser' or 'esbuild'.
- * @default 'terser'
- */
- minify: isDevFn() ? 'esbuild' : 'terser',
- /**
- * Base public path when served in production.
- * @default '/'
- */
- base: VITE_PUBLIC_PATH,
+export default ({ command, mode }: ConfigEnv): UserConfig => {
+ const root = process.cwd();
- /**
- * Directory relative from `root` where build output will be placed. If the
- * directory exists, it will be removed before the build.
- * @default 'dist'
- */
- outDir: 'dist',
- /**
- * Whether to generate sourcemap
- * @default false
- */
- sourcemap: false,
- /**
- * Directory relative from `outDir` where the built js/css/image assets will
- * be placed.
- * @default '_assets'
- */
- assetsDir: '_assets',
- /**
- * Static asset files smaller than this number (in bytes) will be inlined as
- * base64 strings. Default limit is `4096` (4kb). Set to `0` to disable.
- * @default 4096
- */
- assetsInlineLimit: 4096,
- /**
- * Transpile target for esbuild.
- * @default 'es2020'
- */
- esbuildTarget: 'es2020',
- /**
- * Whether to log asset info to console
- * @default false
- */
- silent: false,
- /**
- * Import alias. The entries can either be exact request -> request mappings
- * (exact, no wildcard syntax), or request path -> fs directory mappings.
- * When using directory mappings, the key **must start and end with a slash**.
- * ```
- */
- alias: {
- '/@/': pathResolve('src'),
- },
- // terser options
- terserOptions: {
- compress: {
- drop_console: VITE_DROP_CONSOLE,
- },
- },
- define: {
- __VERSION__: pkg.version,
- },
- cssPreprocessOptions: {
- less: {
- modifyVars: modifyVars,
- javascriptEnabled: true,
- },
- },
- // The package will be recompiled using rollup, and the new package compiled into the esm module specification will be put into node_modules/.vite_opt_cache
- optimizeDeps: {
- include: [
- 'echarts/map/js/china',
- 'ant-design-vue/es/locale/zh_CN',
- '@ant-design/icons-vue',
- 'moment/locale/zh-cn',
- ],
- },
+ const env = loadEnv(mode, root);
- // Local cross-domain proxy
- proxy: createProxy(VITE_PROXY),
- plugins: createVitePlugins(viteEnv),
- rollupInputOptions: {
- // TODO
- // external: VITE_USE_CDN ? externals : [],
- plugins: createRollupPlugin(),
- },
+ // The boolean type read by loadEnv is a string. This function can be converted to boolean type
+ const viteEnv = wrapperEnv(env);
+
+ const {
+ VITE_PORT,
+ VITE_PUBLIC_PATH,
+ VITE_PROXY,
+ VITE_DROP_CONSOLE,
+ VITE_LEGACY,
+ VITE_DYNAMIC_IMPORT,
+ } = viteEnv;
+
+ const isBuild = command === 'build';
+
+ return {
+ base: VITE_PUBLIC_PATH,
+ root,
+ resolve: {
+ alias: [
+ {
+ // /@/xxxx => src/xxx
+ find: /^\/@\//,
+ replacement: pathResolve('src') + '/',
+ },
+ {
+ // /@/xxxx => src/xxx
+ find: /^\/#\//,
+ replacement: pathResolve('types') + '/',
+ },
+ ],
+ },
+ server: {
+ port: VITE_PORT,
+ // Load proxy configuration from .env
+ proxy: createProxy(VITE_PROXY),
+ hmr: {
+ overlay: true,
+ },
+ },
+
+ build: {
+ outDir: OUTPUT_DIR,
+ polyfillDynamicImport: VITE_LEGACY,
+ 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: 1200,
+ },
+ define: {
+ // setting vue-i18-next
+ // Suppress warning
+ __DYNAMIC_IMPORT__: VITE_DYNAMIC_IMPORT,
+ __VUE_I18N_LEGACY_API__: false,
+ __VUE_I18N_FULL_INSTALL__: false,
+ __INTLIFY_PROD_DEVTOOLS__: false,
+ },
+ css: {
+ preprocessorOptions: {
+ less: {
+ modifyVars: {
+ // Used for global import to avoid the need to import each style file separately
+ // reference: Avoid repeated references
+ hack: `true; @import (reference) "${resolve('src/design/config.less')}";`,
+ ...generateModifyVars(),
+ },
+ javascriptEnabled: true,
+ },
+ },
+ },
+
+ // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
+ plugins: createVitePlugins(viteEnv, isBuild),
+
+ optimizeDeps: {
+ // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
+ include: [
+ '@iconify/iconify',
+ 'ant-design-vue/es/locale/zh_CN',
+ 'moment/dist/locale/zh-cn',
+ 'ant-design-vue/es/locale/en_US',
+ 'moment/dist/locale/eu',
+ ],
+ exclude: ['vue-demi'],
+ },
+ };
};
-
-export default {
- ...viteConfig,
- transforms: [globbyTransform(viteConfig)],
-} as UserConfig;
--
Gitblit v1.8.0