// vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, // 1. 基础路径 (解决白屏问题) publicPath: './', // 2. 关闭 SourceMap (最简单粗暴的减体积) // 生产环境不生成 .map 文件,体积能减少 50% 以上,且防源码泄露 productionSourceMap: false, // 3. Webpack 核心优化 (代码分割) configureWebpack: config => { // 只有在打包生产环境 (npm run build) 时才运行优化 if (process.env.NODE_ENV === 'production') { // 开启代码分割 (SplitChunks) config.optimization.splitChunks = { chunks: 'all', // 对所有代码进行分割 (无论是异步还是同步) // 缓存组配置:决定什么代码打包到什么文件里 cacheGroups: { // 组1: 第三方库 (node_modules) // 作用:把所有 node_modules 里的东西拆出来 libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' // 只打包初始依赖 }, // 组2: Vant UI 组件库 (单独拆分) // 作用:Vant 体积较大,单独打包有利于缓存 vant: { name: 'chunk-vant', priority: 20, // 优先级更高,会先被提取 test: /[\\/]node_modules[\\/]_?vant(.*)/ }, // 组3: 公共代码 // 作用:如果你的多个页面都引用了同一个组件,提取出来公用 commons: { name: 'chunk-commons', test: /[\\/]src[\\/]components[\\/]/, // 匹配 src/components 下的组件 minChunks: 2, // 只要被引用2次及以上就提取 priority: 5, reuseExistingChunk: true } } }; } }, })