What is HTTP compression?

Current compression format

Webpack compresses files

  • npm install compression-webpack-plugin -D

Compression of code in HTML files

package.json

{
  "name": "webpack_devserver"."sideEffects": false."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "build": "webpack --config ./config/webpack.common.js --env production"."serve": "webpack serve --config ./config/webpack.common.js --env development"
  },
  "author": ""."license": "ISC"."devDependencies": {
    "@babel/core": "^ 7.12.17"."@babel/preset-env": "^ 7.12.17"."@babel/preset-react": "^ 7.12.13"."@pmmmwh/react-refresh-webpack-plugin": "^ 0.4.3." "."babel-loader": "^ 8.2.2"."clean-webpack-plugin": "^ 3.0.0"."compression-webpack-plugin": "^ 7.1.2." "."css-loader": "^ 5.0.2"."css-minimizer-webpack-plugin": "^ 1.2.0"."html-webpack-plugin": "^ 5.2.0." "."mini-css-extract-plugin": "^ 1.3.9"."purgecss-webpack-plugin": "^ 4.0.2." "."react-dev-utils": "^ 11.0.3"."react-refresh": "^ 0.9.0"."style-loader": "^ 2.0.0." "."vue-loader": "^ 15.9.6"."vue-template-compiler": "^ 2.6.12." "."webpack": "^ 5.23.0"."webpack-cli": "^ 4.5.0." "."webpack-dev-server": "^ 3.11.2"."webpack-merge": "^ 5.7.3." "
  },
  "dependencies": {
    "axios": "^ 0.21.1"."coderwhy_utils": "^ 1.0.0"."dayjs": "^ 1.10.4"."express": "^ 4.17.1"."lodash": "^ 4.17.21"."react": "^ 17.0.1"."react-dom": "^ 17.0.1"."react-router-dom": "^ 5.2.0." "."terser": "^ 5.6.0"."vue": "^ 2.6.12." "."webpack-dev-middleware": "^ 4.1.0." "}}Copy the code

webpack.common.js

const resolveApp = require("./paths");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

const { merge } = require("webpack-merge");

const prodConfig = require("./webpack.prod");
const devConfig = require("./webpack.dev");

const commonConfig = (isProduction) = > {
  return {
    entry: {
      main: "./src/main.js".// index: "./src/index.js"
    },
    output: {
      path: resolveApp("./build"),
      filename: "js/[name].[chunkhash:6].bundle.js".chunkFilename: "js/[name].[contenthash:6].chunk.js".publicPath: ""
    },
    resolve: {
      extensions: [".wasm".".mjs".".js".".json".".jsx".".ts".".vue"].alias: {
        "@": resolveApp("./src"),
        pages: resolveApp("./src/pages"),}},optimization: {
      // Perform compression operations on the code
      // use natural numbers (not recommended),
      // named: use the directory where the package resides as name(recommended in development environments)
      // Deterministic: id generation. Ids generated for the same file are unchanged
      // chunkIds: "deterministic",
      splitChunks: {
        // async asynchronous import
        // Initial Synchronized import
        // all Asynchronous/synchronous import
        chunks: "all".// Minimum size: If the package is split, the minimum size of the package is minSize
        minSize: 20000.// Divide a package larger than maxSize into a package larger than minSize
        maxSize: 20000.// minChunks represent imported packages that are imported at least a few times
        minChunks: 1.cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            filename: "js/[id]_vendors.js".// name: "vendor-chunks.js",
            priority: -10
          },
          // bar: {
          // test: /bar_/,
          // filename: "[id]_bar.js"
          // }
          default: {
            minChunks: 2.filename: "common_[id].js".priority: -20}}},// true/multiple
      // single
      // object: name
      runtimeChunk: {
        name: 'runtime'}},module: {
      rules: [{test: /\.jsx? $/i,
          use: "babel-loader"}, {test: /\.vue$/i,
          use: "vue-loader"}, {test: /\.css/i.// style-lodader -> development
          use: [
            isProduction ? MiniCssExtractPlugin.loader : "style-loader"."css-loader"].sideEffects: true // react scaffolding},],},plugins: [
      new HtmlWebpackPlugin({
        template: "./index.html".// inject: "body"
        cache: true.// If no changes have been made to the file, the previous cache is used
        minify: isProduction ? {
          removeComments: false.// Whether to remove the comment
          removeRedundantAttributes: false.// Whether to remove unnecessary attributes
          removeEmptyAttributes: true.// Whether to remove some empty attributes
          collapseWhitespace: false.// Whether to fold Spaces
          removeStyleLinkTypeAttributes: true.minifyCSS: true.// Whether to compress the CSS
           // whether to compress js
          minifyJS: {
            mangle: {
              toplevel: true}}} :false
      }),
      new VueLoaderPlugin(),
      // When a variable is not found in the code, we will automatically import the corresponding library through ProvidePlugin
      // new webpack.ProvidePlugin({
      // axios: "axios",
      // get: ["axios", "get"]
      // })]}; }module.exports = function (env) {
  const isProduction = env.production;
  process.env.NODE_ENV = isProduction ? "production" : "development";

  const config = isProduction ? prodConfig : devConfig;
  const mergeConfig = merge(commonConfig(isProduction), config);

  return mergeConfig;
};

Copy the code

webpack.prod.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const PurgeCssPlugin = require('purgecss-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const glob = require('glob');

const resolveApp = require('./paths');

const isProduction = true;

module.exports = {
  mode: "production".devtool: "source-map".externals: {
    lodash: "_".dayjs: "dayjs"
  },
  optimization: {
    UsedExports: The purpose is to indicate which functions are unused
    usedExports: true.// production
    minimize: true.minimizer: [
      // Remove unused functions from our code by Terser
      new TerserPlugin({
        parallel: true.extractComments: false.terserOptions: {
          compress: {
            arguments: false.dead_code: true
          },
          mangle: true.toplevel: true.keep_classnames: true.keep_fnames: true}}})],plugins: [
    // Build the environment
    new CleanWebpackPlugin({}),
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash:6].css"
    }),
    new CssMinimizerPlugin(),
    new webpack.optimize.ModuleConcatenationPlugin(),
    // new PurgeCssPlugin({
    // paths: glob.sync(`${resolveApp("./src")}/**/*`, {nodir: true}),
    // safelist: function() {
    // return {
    // standard: ["body", "html"]
    / /}
    / /}
    // }),
    new CompressionPlugin({
      test: /\.(css|js)$/i,
      threshold: 0.// Set the size of the file to start compression
      minRatio: 0.8.// Minimum compression ratio
      algorithm: "gzip"./ / algorithm
      // exclude
      // include
    }),
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime.*\.js/,])]}Copy the code

webpack.dev.js

const resolveApp = require('./paths');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

const isProduction = false;

console.log("Load devConfig config file");

module.exports = {
  mode: "development".devServer: {
    hot: true.hotOnly: true.compress: true.contentBase: resolveApp("./why"),
    watchContentBase: true.proxy: {
      "/why": {
        target: "http://localhost:8888".pathRewrite: {
          "^/why": ""
        },
        secure: false.changeOrigin: true}},historyApiFallback: {
      rewrites: [{from: /abc/, to: "/index.html"}}},plugins: [
    // Development environment
    new ReactRefreshWebpackPlugin(),
  ]
}
Copy the code