代码分割与Tree-shaking

代码分割的概念与原理

代码分割（Code Splitting）是一种将代码拆分为多个小块的技术，允许按需加载或并行加载这些块。在Vue.js应用中，这能显著减少初始加载时间。Webpack等构建工具通过动态导入（Dynamic Imports）实现这一功能：

// 静态导入
import Home from './views/Home.vue'

// 动态导入 - 实现代码分割
const About = () => import('./views/About.vue')

当使用动态导入语法时，Webpack会自动将该模块分离到单独的chunk中。Vue Router与代码分割结合使用时效果尤为明显：

const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue'), // 懒加载
    children: [
      {
        path: 'analytics',
        component: () => import('./components/AnalyticsChart.vue')
      }
    ]
  }
]

Webpack的SplitChunks配置

Webpack4+通过optimization.splitChunks提供精细的代码分割控制。以下是Vue CLI创建项目的默认配置：

// vue.config.js
module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'async',
        minSize: 30000,
        maxSize: 0,
        minChunks: 1,
        maxAsyncRequests: 5,
        maxInitialRequests: 3,
        automaticNameDelimiter: '~',
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
          },
          default: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          }
        }
      }
    }
  }
}

实际项目中可针对Vue生态库进行优化：

cacheGroups: {
  vue: {
    test: /[\\/]node_modules[\\/](vue|vue-router|vuex)[\\/]/,
    name: 'vue-vendor',
    chunks: 'all'
  },
  elementUI: {
    test: /[\\/]node_modules[\\/]element-ui[\\/]/,
    name: 'element-ui',
    chunks: 'all'
  }
}

Tree-shaking的工作机制

Tree-shaking是消除死代码（dead code）的优化技术，依赖于ES6模块的静态结构特性。在Vue项目中需注意：

1. 使用ES模块导入导出：

// 正确 - 支持tree-shaking
import { debounce } from 'lodash-es'

// 错误 - 整个lodash会被打包
import _ from 'lodash'

2. 确保Babel不转换ES模块：

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

3. package.json中设置sideEffects：

{
  "sideEffects": [
    "*.css",
    "*.scss",
    "*.vue"
  ]
}

Vue组件库的按需加载

主流UI库如Element UI、Vant等都支持按需引入。以Element UI为例：

// babel.config.js
module.exports = {
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

// 实际使用
import { Button, Select } from 'element-ui'

Vue.component(Button.name, Button)

自定义组件库实现Tree-shaking需要满足：

1. 每个组件单独导出
2. 样式文件与组件分离
3. 提供ES模块版本

动态导入的高级用法

结合Webpack魔法注释实现更精细控制：

const Login = () => import(
  /* webpackChunkName: "auth" */
  /* webpackPrefetch: true */
  './views/Login.vue'
)

const Settings = () => import(
  /* webpackChunkName: "user" */
  /* webpackPreload: true */
  './views/Settings.vue'
)

预加载策略差异：

• prefetch：空闲时加载，适用于未来可能使用的资源
• preload：父chunk加载时并行加载，当前导航立即需要的资源

性能监控与优化指标

通过webpack-bundle-analyzer分析产物：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false
    })
  ]
}

关键性能指标：

1. 首屏关键资源体积
2. 异步chunk数量
3. 重复依赖占比
4. 未使用的polyfill

SSR中的代码分割处理

Vue SSR需要特殊处理代码分割：

// 入口文件
export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()
    
    router.push(context.url)
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }
      
      Promise.all(matchedComponents.map(Component => {
        if (Component.asyncData) {
          return Component.asyncData({ store, route: router.currentRoute })
        }
      })).then(() => {
        context.state = store.state
        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

客户端需要预加载async chunks：

// 客户端入口
if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}

// 预取异步组件
router.beforeResolve((to, from, next) => {
  const matched = router.getMatchedComponents(to)
  const prevMatched = router.getMatchedComponents(from)
  
  let diffed = false
  const activated = matched.filter((c, i) => {
    return diffed || (diffed = (prevMatched[i] !== c))
  })
  
  if (!activated.length) return next()
  
  Promise.all(activated.map(c => {
    if (c.asyncData) {
      return c.asyncData({ store, route: to })
    }
  })).then(next).catch(next)
})

Webpack5模块联邦实践

Webpack5的Module Federation可实现微前端架构下的代码共享：

// host配置
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        app1: 'app1@http://localhost:3001/remoteEntry.js'
      },
      shared: {
        vue: {
          singleton: true,
          requiredVersion: '^2.6.12'
        },
        'vue-router': {
          singleton: true
        }
      }
    })
  ]
}

// remote配置
new ModuleFederationPlugin({
  name: 'app1',
  filename: 'remoteEntry.js',
  exposes: {
    './Button': './src/components/Button.vue'
  },
  shared: {
    vue: {
      singleton: true
    }
  }
})

常见问题与解决方案

1. 重复依赖问题：

// 使用resolve.alias强制指定版本
configureWebpack: {
  resolve: {
    alias: {
      vue$: path.resolve(__dirname, 'node_modules/vue/dist/vue.runtime.esm.js')
    }
  }
}

2. CSS代码分割：

// 提取CSS到单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ]
}

3. 动态导入失败处理：

// 添加错误处理组件
const ErrorComponent = () => ({
  component: import('./components/Error.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 5000
})

现代构建工具对比

1. Vite的实现方式：

// vite天然支持ES模块
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'vuex'],
          utils: ['lodash-es', 'axios']
        }
      }
    }
  }
})

2. Rollup配置示例：

// rollup.config.js
import { terser } from 'rollup-plugin-terser'
import visualizer from 'rollup-plugin-visualizer'

export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm',
    chunkFileNames: '[name]-[hash].js'
  },
  plugins: [
    terser(),
    visualizer({
      filename: 'bundle-analysis.html',
      open: true
    })
  ],
  preserveEntrySignatures: false
}

长期缓存策略

利用contenthash实现缓存优化：

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

// 解决因模块ID变化导致的hash不稳定
optimization: {
  moduleIds: 'deterministic',
  runtimeChunk: 'single',
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      }
    }
  }
}