减少 Webpack 包中的 JSON 文件大小

Question

I am trying to optimise my Webpack bundle and I have identified a large chunk of data that is being bundled from one of my dependencies. The dependency is world-countries , which is just a huge JSON array of objects containing country data. I am however only using a fraction of this data in my app (a simple React app).

So what I am thinking is that I want to add something into my Webpack config that will effectively let me map the large objects down into just the properties I am using, and avoid having all the rest of the data end up in my bundle.

My only idea currently on how to do this would be to write a node script that runs postinstall or prebuild that imports the module, maps it and saves it back out to disk in a new JSON file. Then that JSON file is what my app imports.

I'm looking for any advice or ideas on the best way to implement this, preferably in a way that doesn't affect my apps code and is just part of the Webpack config.

Answer 1

You can write a custom loader which will be applied on the Jason import, inside it filter out what you need.

Answer 2

i am using DefinePlugin now to create only the JSON I need. In my example i am using the countries from country-data :

Webpack config:

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;
      }));
    }),
  }),
]

You then can use COUNTRIES in your code!