借助 Webpack 优化前端性能的方法

1. 代码分割 (Code Splitting)

动态导入

使用动态 import() 语法将代码拆分成多个 bundle：

// 将大型库单独打包
const lodash = import('lodash');

// 路由级别的代码分割
const Home = () => import('./pages/Home');
const About = () => import('./pages/About');

SplitChunksPlugin 配置

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
        common: {
          minChunks: 2,
          chunks: 'all',
          enforce: true
        }
      }
    }
  }
};

2. 资源压缩和优化

JavaScript 压缩

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 移除console
            drop_debugger: true // 移除debugger
          }
        }
      })
    ]
  }
};

CSS 优化

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css'
    })
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin()
    ]
  }
};

3. 缓存优化

文件指纹 (Hashing)

module.exports = {
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js'
  }
};

模块联邦 (Module Federation)

module.exports = {
  plugins: [
    new webpack.container.ModuleFederationPlugin({
      name: 'app',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button'
      },
      shared: {
        react: { singleton: true }
      }
    })
  ]
};

4. Tree Shaking

配置 package.json

{
  "sideEffects": false
}

Webpack 配置

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
    sideEffects: true
  }
};

5. 预加载和预获取

Prefetch 和 Preload

// 在路由中使用
const Dashboard = () => import(
  /* webpackChunkName: "dashboard" */
  /* webpackPrefetch: true */
  './Dashboard'
);

6. 图片和资源优化

Asset Modules 配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8kb以下转为base64
          }
        }
      }
    ]
  }
};

7. 构建性能优化

缓存配置

module.exports = {
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename]
    }
  }
};

多进程处理

const threadLoader = require('thread-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'thread-loader',
          'babel-loader'
        ]
      }
    ]
  }
};

8. 懒加载和异步加载

组件懒加载

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

这些优化策略可以显著提升前端应用的加载速度和运行性能，建议根据项目实际情况选择合适的优化方案。