如何控制Vue SSR项目中动态导入的代码分割？

问题描述 #

我在为Vue应用实现SSR时，引入了无法在SSR环境运行的第三方库，因此用动态导入做代码分割。目前SSR脚本已正常运行，但同一代码生成的客户端脚本也被分割成独立文件输出。我尝试修改Babel预设配置：

module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', { modules: false }]]
}

但问题没解决。请问哪个参数会影响动态导入的代码分割？我需要SSR输出保持分割状态，客户端输出合并为单个文件。我的vue.config.js配置如下：

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.output.filename = 'js/[name].min.js'
      config.output.chunkFilename = 'js/[name].min.js'
    } else {
      config.output.filename = 'js/[name].js'
      config.output.chunkFilename = 'js/[name].js'
    }
    config.optimization.splitChunks = false

  },
  chainWebpack: (config) => {
      config.entry('render').add('./src/render.ts')
  }

解决方案 #

动态导入的代码分割逻辑完全由Webpack的optimization相关配置控制，需通过环境变量区分SSR/客户端构建目标，针对性调整配置：

1. 新增构建环境变量 #

在构建脚本中添加BUILD_TARGET变量，比如：

• 构建SSR时：BUILD_TARGET=server npm run build
• 构建客户端时：BUILD_TARGET=client npm run build

2. 修改vue.config.js配置 #

根据构建目标动态调整Webpack优化策略：

const webpack = require('webpack');

module.exports = {
  configureWebpack: config => {
    const isServer = process.env.BUILD_TARGET === 'server';
    
    // 输出文件名配置保持不变
    if (process.env.NODE_ENV === 'production') {
      config.output.filename = 'js/[name].min.js';
      config.output.chunkFilename = 'js/[name].min.js';
    } else {
      config.output.filename = 'js/[name].js';
      config.output.chunkFilename = 'js/[name].js';
    }

    // 客户端构建：强制合并所有chunk
    if (!isServer) {
      config.optimization.splitChunks = false;
      // 禁用runtime独立chunk
      config.optimization.runtimeChunk = false;
      // 限制chunk数量为1，合并动态导入的模块
      config.plugins.push(new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1
      }));
    } else {
      // SSR构建：保留动态导入的代码分割
      config.optimization.splitChunks = {
        chunks: 'all',
        // 可按需添加其他SSR专属的splitChunks配置
      };
    }
  },
  chainWebpack: (config) => {
    const isServer = process.env.BUILD_TARGET === 'server';
    // 仅SSR构建添加render入口
    if (isServer) {
      config.entry('render').add('./src/render.ts');
    }
  }
}

关键参数说明 #

• optimization.splitChunks: false：禁用Webpack自动分割公共模块，但动态导入的模块仍会生成独立chunk，需配合LimitChunkCountPlugin强制合并。
• LimitChunkCountPlugin：限制最终生成的chunk数量为1，确保所有动态导入的代码都合并到主文件中。
• optimization.runtimeChunk: false：避免生成额外的runtime代码文件，保证客户端仅输出一个主文件。

为什么修改Babel的modules: false没用？ #

modules: false是告知Babel不转换ES模块语法，让Webpack自行处理模块解析，这和动态导入的代码分割逻辑无直接关联，动态导入的分割完全由Webpack的优化配置控制。

内容的提问来源于stack exchange，提问作者michail.logozar