面试题：Webpack入口与出口动态配置在微前端架构中的应用与优化

1. Webpack入口与出口动态配置

入口配置

在微前端架构中，每个微应用都可以有自己独立的Webpack配置文件。为了实现动态入口配置，可以在webpack.config.js中通过JavaScript逻辑来确定入口。例如：

const path = require('path');
const { getMicroAppEntries } = require('./microAppEntries.js');

const entries = getMicroAppEntries();

module.exports = {
  entry: entries,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  // 其他配置项
};

getMicroAppEntries函数可以根据微应用的实际情况动态返回入口对象。比如根据环境变量、配置文件等决定加载哪些入口文件。

出口配置

出口配置需要根据微应用集成到主应用的方式来确定。如果是通过script标签引入，那么可以设置libraryTarget: 'umd'，使微应用可以在各种环境（如浏览器全局、CommonJS、AMD等）中使用。

module.exports = {
  // 其他配置
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    library: {
      name: 'microAppName',
      type: 'umd'
    }
  }
};

这样生成的文件可以通过<script>标签引入主应用，并且可以在主应用中通过window.microAppName访问微应用暴露的接口。

2. 解决资源冲突

命名空间隔离

CSS: 使用CSS Modules或者预处理器（如Sass、Less）的嵌套规则来实现局部作用域。例如，在CSS Modules中，每个组件的样式文件会被编译成唯一的类名，避免全局样式冲突。

/* button.module.css */
.button {
  background-color: blue;
}

import styles from './button.module.css';
function Button() {
  return <button className={styles.button}>Click me</button>;
}

JavaScript: 使用ES6模块的作用域隔离特性，避免全局变量污染。每个微应用都应该在自己的模块作用域内定义变量和函数，通过export暴露接口。

资源加载顺序

在主应用中，确保微应用的资源按照正确的顺序加载。可以使用工具如loadjs等，在主应用中按照一定顺序加载微应用脚本。例如：

import loadjs from 'loadjs';

loadjs('/microApp1.js', function () {
  loadjs('/microApp2.js', function () {
    // 微应用2加载完成后的逻辑
  });
});

3. 共享模块的处理

提取公共模块

使用Webpack的SplitChunksPlugin来提取共享模块。在webpack.config.js中配置：

module.exports = {
  // 其他配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      name:'vendors'
    }
  }
};

这样会将所有微应用中引用的公共模块提取到vendors.js文件中，在主应用中只需要加载一次该文件，减少重复加载。

CDN引入共享模块

对于一些常用的第三方库，如React、Vue等，可以通过CDN引入。在Webpack配置中设置externals，告诉Webpack这些库在运行时由外部提供。

module.exports = {
  // 其他配置
  externals: {
    react:'react',
    'react - dom':'react - dom'
  }
};

然后在主应用和微应用的HTML文件中通过<script>标签引入CDN资源：

<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react - dom@17.0.2/umd/react - dom.production.min.js"></script>

4. 构建性能优化

代码压缩与Tree - shaking

开启Webpack的代码压缩插件，如TerserPlugin，并且确保Tree - shaking功能正常工作。在webpack.config.js中：

module.exports = {
  // 其他配置
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true // 去除console.log
          }
        }
      })
    ]
  }
};

同时，确保微应用代码采用ES6模块规范编写，Webpack会自动进行Tree - shaking，只打包实际用到的代码。

缓存策略

利用Webpack的缓存机制，设置cache选项。在webpack.config.js中：

module.exports = {
  // 其他配置
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  }
};

这样在后续构建中，如果配置文件和依赖没有变化，Webpack会复用之前的编译结果，加快构建速度。

并行构建

对于多个微应用的构建，可以使用工具如parallel - webpack实现并行构建。安装parallel - webpack后，在package.json中配置脚本：

{
  "scripts": {
    "build:microapps": "parallel - webpack --config webpack.config.js --watch false"
  }
}

这样可以同时构建多个微应用，提高整体构建效率。

星途面试题库