webpack - Webpack 没有在生产构建过程中优化 @fortawesome 和 react-lottie 包

Question

目前，当我开始构建过程时，Webpack 会生成包含我的项目的构建文件夹。Webpack 在生产构建过程中没有优化 @fortawesome。它会显示警告，指出某些文件的大小大于建议的大小。命令行输出： npm run build

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  static/js/959.ae6f8be8.js (369 KiB)
  static/js/527.82a92b1c.js (1.35 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  frame (382 KiB)
      static/js/runtime-frame.df69503a.js
      static/js/959.ae6f8be8.js
      static/js/frame.876a7abf.js
  connect (1.82 MiB)
      static/js/runtime-connect.f81def10.js
      static/js/959.ae6f8be8.js
      static/js/527.82a92b1c.js
      static/js/170.32f6e6f6.js
      static/js/961.b51703ce.js
      static/js/connect.b195f201.js
  signtx (1.95 MiB)
      static/js/runtime-signtx.e403148c.js
      static/js/959.ae6f8be8.js
      static/js/527.82a92b1c.js
      static/js/170.32f6e6f6.js
      static/js/19.49464c33.js
      static/js/961.b51703ce.js
      static/js/signtx.d6a499cc.js
  logicsigtx (1.81 MiB)
      static/js/runtime-logicsigtx.91fceb5f.js
      static/js/959.ae6f8be8.js
      static/js/527.82a92b1c.js
      static/js/965.4871863a.js
      static/js/961.b51703ce.js
      static/js/logicsigtx.280d5599.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.24.4 compiled with 3 warnings in 16021 ms

有两个包没有被优化：

• @fortawesome
• 反应洛蒂

他们占用了大量空间，超过了捆绑大小项目的一半。下一张图片来自webpack-bundle-analyzer： @fortawesome 重量为 695kB，react-lottie 重量为 524kB，两者加起来差不多 1.25MB。例如，连接包重量为 1.82MB，1.25MB 来自 2 个包。

我的 webpack 配置：

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const webpackMerge = require("webpack-merge");
const modeConfig = env => require(`./config/webpack.${env}`)(env);

module.exports = (env, { mode }) => {
    return webpackMerge.merge(
        {
            entry: {
                frame: './src/index.ts',
                connect: './src/pages/connect.tsx',
                signtx: './src/pages/signtx.tsx',
                logicsigtx: './src/pages/signlogictx.tsx',
                ...(mode === "development" && { test: './test/test.tsx' })
            },
            mode,
            module: {
                rules: [
                    {
                        test: /\.js$/u,
                        use: [ "source-map-loader" ],
                        enforce: "pre",
                    },
                    {
                        test: /\.tsx?$/u,
                        use: 'ts-loader',
                        exclude: /node_modules/u
                    },
                    {
                        test: /\.(png|jpg|bmp|svg)$/u,
                        exclude: [/\.(js|mjs|jsx|ts|tsx|map)$/, /\.html$/, /\.json$/],
                        use: [ {
                            loader: 'file-loader',
                            options: {
                                emitFile: true,
                                name: 'static/media/[name].[hash:8].[ext]',
                            }
                        } ]
                    },
                    {
                        test: /\.s[ac]ss$/iu,
                        use: [
                          'style-loader',
                          {
                                loader: 'css-loader',
                                options: {
                                    sourceMap: mode === "development",
                                    importLoaders: 1,
                                },
                            },
                          'sass-loader',
                        ],
                    },
                    {
                        test: /\.css$/iu,
                        use: [
                            'style-loader',
                            {
                                loader: 'css-loader',
                                options: {
                                    sourceMap: mode === "development",
                                    importLoaders: 0,
                                },
                            },
                        ],
                    },
                ]
            },
            resolve: {
                extensions: [ '.tsx', '.ts', '.js', '.jsx' ]
            },
            plugins: [
                new HtmlWebPackPlugin({
                    title: "Frame",
                    filename: "frame.html",
                    chunks: [ "frame" ]
                }),
                new HtmlWebPackPlugin({
                    title: "Connect",
                    filename: "connect.html",
                    template: "./src/pages/html/template.html",
                    chunks: [ "connect" ]
                }),
                new HtmlWebPackPlugin({
                    title: "Sign",
                    filename: "signtx.html",
                    template: "./src/pages/html/template.html",
                    chunks: [ "signtx" ]
                }),
                new HtmlWebPackPlugin({
                    title: "LogicSig",
                    filename: "logicsigtx.html",
                    template: "./src/pages/html/template.html",
                    chunks: [ "logicsigtx" ]
                }),
                new BundleAnalyzerPlugin()
            ],
        },
        modeConfig(mode)
    );
};

和 webpack.production.js

const path = require("path");

module.exports = env => ({
    output: {
        filename: 'static/js/[name].[contenthash:8].js',
        chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
        path: path.resolve(__dirname, "..", 'build'),
    },
    optimization: {
        minimize: true,
        splitChunks: {
          chunks: 'all',
        },
        runtimeChunk: {
            name: entrypoint => `runtime-${entrypoint.name}`,
        },
    },
});

包.json

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack-dev-server": "webpack-dev-server --mode=development --open",
    "dev": "npm run webpack-dev-server",
    "start": "npm run dev",
    "build:dev": "webpack --mode=production",
    "build": "webpack --mode=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^14.0.18",
    "@types/promise-queue": "^2.2.0",
    "@types/react": "^16.9.41",
    "@types/react-dom": "^16.9.8",
    "@types/reactstrap": "^8.5.1",
    "@types/shortid": "0.0.29",
    "@types/webpack": "^4.41.20",
    "@types/webpack-dev-server": "^3.11.0",
    "@typescript-eslint/eslint-plugin": "^4.1.1",
    "@typescript-eslint/parser": "^4.1.1",
    "belter": "^1.0.142",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^4.0.0",
    "eslint": "^7.9.0",
    "eslint-plugin-react": "^7.20.6",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "sass": "^1.26.10",
    "sass-loader": "^9.0.2",
    "source-map-loader": "^1.0.1",
    "style-loader": "^1.2.1",
    "ts-loader": "^7.0.5",
    "typescript": "^4.0.2",
    "webpack": "^5.24.4",
    "webpack-bundle-analyzer": "^4.4.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.0.8"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@ledgerhq/hw-transport-u2f": "^5.21.0",
    "@ledgerhq/hw-transport-webusb": "^5.21.0",
    "@types/react-lottie": "^1.2.5",
    "bootstrap": "^4.5.0",
    "cross-domain-utils": "^2.0.33",
    "hi-base32": "^0.5.0",
    "promise-queue": "^2.2.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-lottie": "^1.2.3",
    "reactstrap": "^8.5.1",
    "shortid": "^2.2.15",
  }
}

有什么办法可以减小这个文件的大小？

标签： webpack