Vue 项目打包优化方案

代码分割与懒加载

通过动态导入实现路由懒加载和组件懒加载，减少初始加载体积。使用 import() 语法或 Vue 的 defineAsyncComponent 拆分代码块。
示例：

const Home = () => import('./views/Home.vue');

第三方依赖优化

将稳定的大型库（如 vue、lodash）通过 externals 配置排除打包，改为 CDN 引入。在 vue.config.js 中配置：

configureWebpack: {
  externals: {
    vue: 'Vue',
    lodash: '_'
  }
}

Tree Shaking 与 Babel 配置

确保 Babel 不转换 ES6 模块语法，保留 import/export 语句以便 Webpack 分析依赖。在 .babelrc 中禁用模块转换：

{
  "presets": [["@babel/preset-env", { "modules": false }]]
}

压缩与混淆

启用 TerserPlugin 压缩代码并移除调试语句。在 vue.config.js 中配置：

configureWebpack: {
  optimization: {
    minimizer: [new TerserPlugin({
      terserOptions: { compress: { drop_console: true } }
    })]
  }
}

图片与静态资源优化

使用 image-webpack-loader 压缩图片，或转换为 WebP 格式。对于小图标，优先使用 SVG 或字体图标。通过 url-loader 将小文件转为 Base64 内联。

Gzip/Brotli 压缩

在服务端启用静态资源压缩（如 Nginx 配置 gzip），或通过 compression-webpack-plugin 预生成压缩文件：

const CompressionPlugin = require('compression-webpack-plugin');
configureWebpack: {
  plugins: [new CompressionPlugin({ algorithm: 'gzip' })]
}

分析工具辅助

使用 webpack-bundle-analyzer 可视化分析包体积，定位冗余依赖：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
configureWebpack: {
  plugins: [new BundleAnalyzerPlugin()]
}

持久化缓存策略

配置 output.filename 使用 [contenthash] 实现长期缓存，避免未变更文件重复下载：

output: {
  filename: '[name].[contenthash:8].js'
}