webpack优化

friendly-errors-webpack-plugin (opens new window)

npm install @soda/friendly-errors-webpack-plugin --save-dev

  stats: "errors-only",

const FriendlyErrorsWebpackPlugin = require("@soda/friendly-errors-webpack-plugin");
const notifier = require("node-notifier");


 new FriendlyErrorsWebpackPlugin({
      compilationSuccessInfo: {
        messages: ["You application is running here http://localhost:" + port],
        notes: ["💊构建信息及时关注窗口左上角"],
      },
      // new WebpackBuildNotifierPlugin({
      //   title: '🎯 Solv Development Notification',
      //   logo,
      //   suppressSuccess: true,
      // }),
      onErrors: function (severity, errors) {
        if (severity !== "error") {
          return;
        }
        const error = errors[0];
        console.log(error);
        notifier.notify({
          title: "❌ Webpack Build Error",
          message: severity + ": " + error.name,
          subtitle: error.file || "",
          icon: join(__dirname, "app-icon.svg"),
        });
      },
      clearConsole: true,
    }),

webpack-bundle-analyzer (opens new window)

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

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

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

css-minimizer-webpack-plugin

···text pnpm add -D css-minimizer-webpack-plugin

pnpm add -D terser-webpack-plugin ···

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

module.exports = {
  // ... 其他配置
  optimization: {
    minimize: true,
    minimizer: [
      // CSS 压缩配置
      new CssMinimizerPlugin({
        parallel: true, // 启用多线程
        minimizerOptions: {
          preset: [
            'default',
            {
              discardComments: { removeAll: true }, // 移除注释
              normalizeWhitespace: false, // 不删除空格
              minifyFontValues: { removeQuotes: false } // 不移除引号
            },
          ],
        },
        // 测试配置
        test: /\.css$/i, // 匹配需要优化的文件
        include: undefined, // 包含的文件
        exclude: undefined, // 排除的文件
      }),

      // JS 压缩配置
      new TerserPlugin({
        parallel: true, // 启用多线程
        terserOptions: {
          parse: {
            ecma: 8, // ES8 语法支持
          },
          compress: {
            ecma: 5, // 压缩到 ES5
            warnings: false, // 不显示警告
            comparisons: false, // 不优化比较操作
            inline: 2, // 内联函数控制
            drop_console: true, // 移除 console
            drop_debugger: true, // 移除 debugger
            pure_funcs: ['console.log'], // 移除特定函数
          },
          mangle: {
            safari10: true, // 解决 Safari 10 问题
          },
          output: {
            ecma: 5, // 输出 ES5 代码
            comments: false, // 移除注释
            ascii_only: true, // 只用 ascii 字符
          },
        },
        extractComments: false, // 不提取注释
        // 测试配置
        test: /\.[cm]?js(\?.*)?$/i, // 匹配需要优化的文件
        include: undefined, // 包含的文件
        exclude: undefined, // 排除的文件
      }),
    ],
  },
}

clear-webpack-plugin (opens new window)

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const webpackConfig = {
    plugins: [
        /**
         * All files inside webpack's output.path directory will be removed once, but the
         * directory itself will not be. If using webpack 4+'s default configuration,
         * everything under <PROJECT_DIR>/dist/ will be removed.
         * Use cleanOnceBeforeBuildPatterns to override this behavior.
         *
         * During rebuilds, all webpack assets that are not used anymore
         * will be removed automatically.
         *
         * See `Options and Defaults` for information
         */
        new CleanWebpackPlugin(),
    ],
};

module.exports = webpackConfig;

progress-bar-webpack-plugin

const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const chalk = require('chalk');  // 用于控制台颜色

module.exports = {
  plugins: [
    new ProgressBarPlugin({
      format: `  build [:bar] ${chalk.green.bold(':percent')} (:elapsed seconds)`,
      clear: false,
      width: 60
    })
  ]
}