前端工程化面试题库（30题）

// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    sideEffects: false
  }
}

module.exports = {
  entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  }
}

optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

// 异步加载模块
import('./math.js').then(math => {
  console.log(math.add(16, 26));
});

// React.lazy
const LazyComponent = React.lazy(() => import('./LazyComponent'));

// webpack.config.js
module.exports = {
  devServer: {
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

// 代码中接受HMR
if (module.hot) {
  module.hot.accept('./library.js', function() {
    // 处理更新逻辑
  })
}

// Polyfill示例
if (!Array.prototype.includes) {
  Array.prototype.includes = function(searchElement) {
    return this.indexOf(searchElement) !== -1;
  };
}

// webpack.config.js
module.exports = {
  devtool: 'source-map' // 生产环境
  // devtool: 'eval-source-map' // 开发环境
}

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    '@vue/typescript/recommended'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  rules: {
    'no-console': 'warn',
    'no-unused-vars': 'error'
  }
}

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'eslint-loader',
        enforce: 'pre'
      }
    ]
  }
}

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'prettier' // 关闭与Prettier冲突的规则
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error'
  }
}

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack serve",
    "build": "webpack --mode=production"
  },
  "dependencies": {
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "webpack": "^5.0.0"
  }
}

{
  "dependencies": {
    "vue": "^3.2.0",      // 3.2.0 <= version < 4.0.0
    "lodash": "~4.17.21", // 4.17.21 <= version < 4.18.0
    "axios": "0.27.2"     // 精确版本
  }
}

$primary-color: #333;
$margin: 16px;

.header {
  color: $primary-color;
  margin: $margin;
  
  &:hover {
    color: lighten($primary-color, 20%);
  }
}

@primary-color: #333;
@margin: 16px;

.header {
  color: @primary-color;
  margin: @margin;
  
  &:hover {
    color: lighten(@primary-color, 20%);
  }
}

primary-color = #333
margin = 16px

.header
  color primary-color
  margin margin
  
  &:hover
    color lighten(primary-color, 20%)

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default'
    })
  ]
}

module.exports = {
  module: {
    rules: [
      // 处理CSS文件
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 处理JavaScript文件
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      // 处理图片文件
      {
        test: /\.(png|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  }
}

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  plugins: [
    // 清理输出目录
    new CleanWebpackPlugin(),
    // 生成HTML文件
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    // 定义环境变量
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  }
}

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      },
      common: {
        minChunks: 2,
        chunks: 'all',
        name: 'common'
      }
    }
  }
}

// 创建新的Chunk
import('./lazy-module.js').then(module => {
  // 使用模块
});

{
  "name": "My PWA App",
  "short_name": "PWA App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ]
}

// 缓存策略
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

// 将微应用作为npm包发布
import MicroApp from '@company/micro-app';

function App() {
  return (
    <div>
      <MicroApp />
    </div>
  );
}

// 注册微应用
registerApplication({
  name: 'vue-app',
  app: () => System.import('@company/vue-app'),
  activeWhen: '/vue'
});

// 启动Single-SPA
start();

// webpack.config.js - 主应用
new ModuleFederationPlugin({
  name: 'shell',
  remotes: {
    mfApp: 'mfApp@http://localhost:3001/remoteEntry.js'
  }
});

// 使用远程模块
const RemoteComponent = React.lazy(() => import('mfApp/Component'));

// 定义微前端组件
class MicroFrontend extends HTMLElement {
  connectedCallback() {
    this.innerHTML = '<div>Micro Frontend Content</div>';
  }
}

customElements.define('micro-frontend', MicroFrontend);

<iframe 
  src="http://micro-app.com" 
  sandbox="allow-scripts allow-same-origin">
</iframe>

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

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

// webpack.config.js
module.exports = {
  performance: {
    maxAssetSize: 250000,      // 250kb
    maxEntrypointSize: 250000, // 250kb
    hints: 'error'
  }
}

# GitHub Actions
- name: Check bundle size
  run: |
    npm run build
    npx bundlesize

// 统一的主题配置
const theme = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d'
  },
  spacing: {
    small: '8px',
    medium: '16px',
    large: '24px'
  }
}

// 使用设计系统组件
import { Button, Card, Input } from '@company/design-system';

function LoginForm() {
  return (
    <Card>
      <Input placeholder="Username" />
      <Button variant="primary">Login</Button>
    </Card>
  );
}

// 可以使用任何前端框架
// React + Headless CMS
useEffect(() => {
  fetch('/api/content')
    .then(res => res.json())
    .then(data => setContent(data));
}, []);

// Next.js + Headless CMS
export async function getStaticProps() {
  const posts = await cms.getPosts();
  
  return {
    props: { posts },
    revalidate: 60 // ISR
  };
}

// 加载WASM模块
WebAssembly.instantiateStreaming(fetch('math.wasm'))
  .then(result => {
    const { calculate } = result.instance.exports;
    
    // 使用WASM函数进行复杂计算
    const result = calculate(largeDataSet);
  });

// 使用WASM进行图像处理
const processImage = async (imageData) => {
  const wasmModule = await loadWasmModule();
  return wasmModule.processImage(imageData);
};