老师你好打包太大怎么优化啊?谢谢
来源:1-1 课程导学

春去_秋来
2024-03-14
求救啊,公司app内嵌的h5项目
打包太大怎么优化啊?
// vite.config.js
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import ElementPlus from 'unplugin-element-plus/vite'
import Components from 'unplugin-vue-components/vite'
import legacy from '@vitejs/plugin-legacy'
import terser from '@rollup/plugin-terser'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
esbuild: {
target: 'es2015'
},
plugins: [
legacy({
targets: ['chrome >= 50'],
renderLegacyChunks: true,
modernPolyfills: true
}),
vue(),
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
symbolId: 'icon-[name]'
}),
vueJsx(),
ElementPlus(),
Components({
resolvers: [
(componentName) => {
if (componentName.startsWith('Icon')) {
return { name: componentName.slice(4), from: '@icon-park/vue-next' }
}
}
]
})
],
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "@/assets/sass/my_color_var";`
}
}
},
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
}
},
build: {
targets: ['chrome >= 50'],
rollupOptions: {
plugins: [
terser({
compress: {
drop_console: true
}
})
],
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
return 'vendor'
}
}
}
}
},
base: './',
server: {
port: 2225,
host: true
}
})
这是我现在的vite.config.js
写回答
1回答
-
张轩
2024-03-15
同学你好
我看你基本的优化都已经做了,一些第三方库已经拿出去了,剩下的就只有把这个入口文件按路由分割了,可以参考这个 issue
https://github.com/vitejs/vite/issues/745
这个入口文件其实不是很大啊,现在很多的应用都比这个大,你可以花更多时间在网络优化上,比如使用 br(和 gzip 类似,但是比 gzip 压的更小) 压缩,使用 http/2 或者甚至 http/3 上面。
042024-03-16
相似问题