減少 Webpack 包中的 JSON 文件大小

Question

我正在嘗試優化我的 Webpack 包，並且我已經確定了從我的一個依賴項中捆綁的大量數據。 依賴項是world-countries ，它只是一個包含國家數據的大型 JSON 對象數組。 然而，我只在我的應用程序（一個簡單的 React 應用程序）中使用了這些數據的一小部分。

所以我在想的是我想在我的 Webpack 配置中添加一些東西，這將有效地讓我 map 將大對象歸結為我正在使用的屬性，並避免將所有 Z65E8800B5C6800AAD896F888 的數據放在我的包中。

我目前關於如何做到這一點的唯一想法是編寫一個運行 postinstall 或 prebuild 的節點腳本來導入模塊，將其映射並在新的 JSON 文件中將其保存回磁盤。 然后那個 JSON 文件就是我的應用程序導入的文件。

我正在尋找有關實現此功能的最佳方法的任何建議或想法，最好以不影響我的應用程序代碼且只是 Webpack 配置的一部分的方式。

Answer 1

您可以編寫一個自定義加載器，該加載器將應用於 Jason 導入，在其中過濾掉您需要的內容。

Answer 2

我現在使用DefinePlugin來創建我需要的 JSON。 在我的示例中，我使用的是country-data中的國家/地區：

Webpack 配置：

import { countries } from 'country-data';

...

plugins: [
  new webpack.DefinePlugin({
    COUNTRIES: webpack.DefinePlugin.runtimeValue(function() {
      return JSON.stringify(countries.all.filter(function (c) {
        // Has "United Kingdom" twice, @see https://github.com/OpenBookPrices/country-data/issues/72
        var assigned = c.status === 'assigned';
        // cleanup JSON
        ['countryCallingCodes', 'languages', 'currencies', 'emoji', 'ioc', 'alpha3', 'status'].forEach(function (key) {
          delete c[key];
        });
        return assigned;
      }));
    }),
  }),
]

然后，您可以在代碼中使用COUNTRIES ！