如何减小 AntD 包大小 | TS | Next.js |较少的答案

我有一个 Next.js 应用程序，在构建过程中我注意到大小非常大。页面大小相似，意味着整个 AntD 包正在被导入。

Page                                       Size     First Load JS
┌ λ /                                      3.21 kB         324 kB
├   /_app                                  0 B            86.6 kB
├ ○ /404                                   194 B          86.8 kB
├ λ /account                               7.92 kB         314 kB
├ λ /announcement/[reference]              20.8 kB         338 kB
├ λ /api/announcements                     0 B            86.6 kB
├ λ /api/announcements/[reference]         0 B            86.6 kB
├ λ /api/announcements/create              0 B            86.6 kB
├ λ /api/announcements/update              0 B            86.6 kB
├ λ /api/auth/[...nextauth]                0 B            86.6 kB
├ λ /api/cities                            0 B            86.6 kB
├ λ /api/favorite/addRemove                0 B            86.6 kB
├ λ /api/file_upload                       0 B            86.6 kB
├ λ /api/user/update                       0 B            86.6 kB
├ λ /api/views                             0 B            86.6 kB
├ ● /create-announcement                   2.2 kB          339 kB
├ λ /edit-announcement                     2.37 kB         339 kB
├ λ /favorites                             523 B           349 kB
├ λ /my-announcements                      484 B           349 kB
├ ● /privacy                               4.04 kB         301 kB
└ λ /results                               484 B           349 kB
+ First Load JS shared by all              86.6 kB
  ├ chunks/framework-988bc005bc55cbd9.js   42.2 kB
  ├ chunks/main-52e36552fcad78b4.js        28.8 kB
  ├ chunks/pages/_app-3849a3004cc82780.js  13.3 kB
  ├ chunks/webpack-d374e47f707043da.js     2.31 kB
  └ css/e8d6ed08bf22f83b.css               67.2 kB

我尝试更改 package.json、tsconfig.json、next.config.js .babelrc.js 文件，但一旦我觉得我达到了我的目标，我就会收到以下错误。这个想法是使用 es AntD 而不是 lib

SyntaxError: 不能在模块外使用 import 语句

我有以下配置：

// .babelrc.js

module.exports = {
    presets: [
        ['next/babel']
    ],
    plugins: [
        ['import',
            {
                libraryName: 'antd', style: true, libraryDirectory: 'es',
            }
        ]
    ],
};

// next.config.js
const withNextTranslate = require('next-translate');
const withAntdLess = require('next-plugin-antd-less');

module.exports = withNextTranslate(withAntdLess({
  lessVarsFilePath: "./styles.antd.less",
  cssLoaderOptions: {},
  images: {
    domains: ["storage.googleapis.com"],
  },

  webpack: (config) => {
    config.module.rules.push(
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8000,
              name: '[name].[hash:7].[ext]'
            }
          }
        ]
      }
    )
    return config;
  }
}));

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

我将 .less 文件中的导入设置为 @import '~antd/es/style/themes/default.less';

知道配置文件有什么问题吗？

【问题讨论】：

标签： typescript next.js babeljs less antd

【解决方案1】：

如果您正在寻找专门的 webpack 配置，这可能无法回答问题，但这里是我的提示：

您也可以通过import Row from "antd/lib/row这种方式手动导入，无需整个库即可导入组件。我没有时间设置摇树导入，所以我现在决定手动导入。
缩小您的代码。你可以使用minify-simplify babel 插件。

【讨论】：