2024-04-18 使用webpack减少打包文件数量

要减少Webpack打包文件的数量，你可以结合使用代码分割、Tree Shaking、优化Loader和压缩输出等策略。以下是一些具体的步骤和示例代码：

1. 代码分割

使用import()语法进行动态导入，实现代码分割。

// 在需要的地方动态导入模块
button.addEventListener('click', event => {
  import('./dynamic-module.js')
    .then(module => {
      module.run();
    })
    .catch(err => {
      console.log('Dynamic import failed: ', err);
    });
});

2. Tree Shaking

确保Webpack配置启用了Tree Shaking。

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    usedExports: true, // 开启Tree Shaking
    sideEffects: false, // 设置为false，表示所有模块都有副作用，开启更严格的Tree Shaking
  },
  // ...
};

3. 优化Loader

减少Loader的使用，只在需要时引入。

// webpack.config.js
module: {
  rules: [
    // 只对.js和.jsx文件使用babel-loader
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          // Babel options
        },
      },
    },
    // ... 其他必要的Loader配置
  ],
};

4. 压缩和优化输出

使用TerserPlugin压缩JavaScript代码。

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      // Terser options
    })],
  },
  // ...
};

对于CSS，你可以使用css-minimizer-webpack-plugin或OptimizeCSSAssetsPlugin。

// webpack.config.js
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimizer: [
      `...`,
      new CssMinimizerPlugin(),
    ],
  },
  // ...
};

5. 利用缓存

启用Webpack的持久化缓存。

// webpack.config.js
module.exports = {
  // ...
  cache: {
    type: 'filesystem', // 使用文件系统缓存
    buildDependencies: {
      config: [__filename], // 当webpack.config.js文件变化时，缓存失效
    },
  },
  // ...
};

6. 分析打包结果

使用webpack-bundle-analyzer插件分析打包结果。

首先安装插件：

npm install --save-dev webpack-bundle-analyzer

然后在Webpack配置中引入插件：

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

module.exports = {
  // ...
  plugins: [
    // ... 其他插件
    new BundleAnalyzerPlugin(),
  ],
  // ...
};

运行Webpack时，插件会自动在浏览器中打开一个页面，展示各个模块的体积和依赖关系，帮助你找到优化的点。

注意：webpack-bundle-analyzer通常用于开发环境，不建议在生产环境中使用，因为它会引入额外的依赖并增加构建时间。