vite build very slow #15740
-
Describe the bugwhen i build, in transforming is very slow Steps to reproducethis is my vite config import { defineConfig, loadEnv, ConfigEnv, UserConfig } from "vite";
import { resolve } from "path";
import { wrapperEnv } from "./build/getEnv";
import { createProxy } from "./build/proxy";
import { createVitePlugins } from "./build/plugins";
import pkg from "./package.json";
import moment from "moment";
const { dependencies, devDependencies, name, version } = pkg;
const __APP_INFO__ = {
pkg: { dependencies, devDependencies, name, version },
lastBuildTime: moment().format("YYYY-MM-DD HH:mm:ss")
};
console.log(moment().format("YYYY-MM-DD HH:mm:ss"), "-----------------");
// @see: https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
const root = process.cwd();
const env = loadEnv(mode, root);
const viteEnv = wrapperEnv(env);
return {
base: viteEnv.VITE_PUBLIC_PATH,
root,
resolve: {
alias: {
"@": resolve(__dirname, "./src"),
"vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js"
}
},
define: {
__APP_INFO__: JSON.stringify(__APP_INFO__)
},
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/styles/var.scss";`
}
}
},
plugins: createVitePlugins(viteEnv),
esbuild: {
pure: viteEnv.VITE_DROP_CONSOLE ? ["console.log", "debugger"] : []
},
build: {
outDir: "dist",
minify: "esbuild",
// esbuild 打包更快，但是不能去除 console.log，terser打包慢，但能去除 console.log
// minify: "terser",
// terserOptions: {
// compress: {
// drop_console: viteEnv.VITE_DROP_CONSOLE,
// drop_debugger: true
// }
// },
// 禁用 gzip 压缩大小报告，可略微减少打包时间
reportCompressedSize: false,
// 规定触发警告的 chunk 大小 default 500
chunkSizeWarningLimit: 2000,
rollupOptions: {
output: {
// 最小化拆分包
manualChunks: id => {
if (id.startsWith("virtual:svg-icons-")) {
return "sprite";
}
if (id.includes("node_modules")) {
const fileName = id.toString().split("node_modules/").pop()!.split("/")[0].toString();
return fileName;
}
},
// Static resource classification and packaging
chunkFileNames: chunkInfo => {
const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split("/") : [];
const fileName = facadeModuleId[facadeModuleId.length - 2] || "[name]";
return `assets/js/${fileName}-[name]-[hash].js`;
},
entryFileNames: "assets/js/[name]-[hash].js",
assetFileNames: "assets/[ext]/[name]-[hash].[ext]"
},
external: [""]
}
}
};
});System Info"vite": "^4.3.9",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-eslint": "^1.8.1",
"vite-plugin-html": "^3.2.0",
"vite-plugin-inspect": "^0.8.3",
"vite-plugin-svg-icons": "^2.0.1",Used Package Managerpnpm LogsNo response Validations
|
Beta Was this translation helpful? Give feedback.
Replies: 5 comments 4 replies
-
|
facing the same issue, for every save it takes upto 20 seconds build the app and render the app again |
Beta Was this translation helpful? Give feedback.
-
|
I think it would be good to try to remove plugins to see which ones are taking so much time. You can also use |
Beta Was this translation helpful? Give feedback.
-
|
你有找到解决方案吗？ |
Beta Was this translation helpful? Give feedback.
-
|
没有，这个别的团队改的项目， 打包从4min->3min， 效果不明显 |
Beta Was this translation helpful? Give feedback.
-
|
update the @vitejs/plugin-legacy can winding build of speed |
Beta Was this translation helpful? Give feedback.
-
|
vite-plugin-svg-icons 每一个 transform 都会 load 一次，调用一次fs.glob查找所有svg，该io操作在windows中很慢。可以在 node_module/vite-plugin-svg-icons/dist/index.mjs 中做如下修改，来测试是否有改进。 let svgFilsStats = null <--- add this line
async function compilerIcons(cache, svgOptions, options) {
const { iconDirs } = options;
let insertHtml = "";
const idSet = /* @__PURE__ */ new Set();
for (const dir of iconDirs) {
svgFilsStats ??= fg.sync("**/*.svg", { <--- change this line
cwd: dir,
stats: true,
absolute: true
});建议换一个svg图标库。 Every time a let svgFilsStats = null <--- add this line
async function compilerIcons(cache, svgOptions, options) {
const { iconDirs } = options;
let insertHtml = "";
const idSet = /* @__PURE__ */ new Set();
for (const dir of iconDirs) {
svgFilsStats ??= fg.sync("**/*.svg", { <--- change this line
cwd: dir,
stats: true,
absolute: true
});You should change to another library. |
Beta Was this translation helpful? Give feedback.
-
感谢回答，就是这个插件的问题。。。。我去了之后 |
Beta Was this translation helpful? Give feedback.
-
|
1m -> 19s 
|
Beta Was this translation helpful? Give feedback.
-
|
8min -> 4min thanks! |
Beta Was this translation helpful? Give feedback.
vite-plugin-svg-icons 每一个 transform 都会 load 一次，调用一次fs.glob查找所有svg，该io操作在windows中很慢。可以在 node_module/vite-plugin-svg-icons/dist/index.mjs 中做如下修改，来测试是否有改进。
建议换一个svg图标库。
Every time a
transformoccurs invite-plugin-svg-icons, it loads once and callsfs.globto search for all svgs. This IO operation is very slow in Windows. The follo…