Webpack项目优化方案

一、多进程构建优化

1. 使用thread-loader实现多进程打包

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve('src'),
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: require('os').cpus().length - 1,
              workerParallelJobs: 50,
              poolTimeout: 2000
            }
          },
          'babel-loader'
        ]
      }
    ]
  }
}

2. 使用HappyPack（Webpack4及以下版本）

const HappyPack = require('happypack');
const happyThreadPool = HappyPack.ThreadPool({ size: 5 });

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'happypack/loader?id=js',
        include: [path.resolve('./src')]
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'js',
      threadPool: happyThreadPool,
      loaders: ['babel-loader']
    })
  ]
}

二、代码分割优化

1. 动态导入（按需加载）

// 使用import()语法
const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');

2. 配置SplitChunksPlugin

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

3. 运行时代码单独提取

module.exports = {
  optimization: {
    runtimeChunk: {
      name: 'runtime'
    }
  }
}

三、Tree Shaking优化

1. 确保使用ES6模块语法

// 使用这种方式导出
export const func1 = () => {...}
export const func2 = () => {...}

// 而不是
module.exports = { func1, func2 }

2. Webpack配置

module.exports = {
  mode: 'production', // 生产模式自动启用tree shaking
  optimization: {
    usedExports: true, // 标记未使用的导出
    minimize: true,    // 启用代码压缩
    sideEffects: true  // 启用sideEffects优化
  }
}

3. package.json配置

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

四、其他综合优化策略

1. 缓存优化

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

2. 缩小文件搜索范围

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': path.resolve('src')
    },
    modules: [path.resolve(__dirname, 'node_modules')]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve('src'),
        use: ['babel-loader']
      }
    ]
  }
}

3. 使用DLLPlugin预编译不常变化的模块

// webpack.dll.config.js
module.exports = {
  entry: {
    vendor: ['react', 'react-dom', 'lodash']
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'dll'),
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.join(__dirname, 'dll', '[name]-manifest.json')
    })
  ]
};

// webpack.config.js
module.exports = {
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dll/vendor-manifest.json')
    })
  ]
}

五、构建分析工具

1. 使用webpack-bundle-analyzer分析包大小

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

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

2. 使用speed-measure-webpack-plugin测量构建速度

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  // 原有webpack配置
});

通过以上优化策略的组合使用，可以显著提升Webpack项目的构建速度和输出质量。建议根据项目实际情况逐步实施这些优化措施，并使用分析工具验证优化效果。