search

wiziple / gatsby-plugin-intl

Gatsby plugin that turns your website into an internationalization-framework out of the box.
http://gatsby-starter-default-intl.netlify.com
325 stars 178 forks source link

ContextReplacementPlugin doesn't work due to incorrect replacement path #83

Closed artemtam closed 5 years ago

artemtam commented 5 years ago

By default Webpack imports all @formatjs localization files, because during the build it doesn't know what exactly the application need. To fix this behavior ContextReplacementPlugin is used, though it doesn't work correctly.

Currently, gatsby-plugin-intl imports all the localizations regardless of what languages are set in the config:

image

To fix this, in gatsby-node.js replace

new webpack.ContextReplacementPlugin(
        /react-intl[/\\]locale-data$/,
        regex
),

with

new webpack.ContextReplacementPlugin(
        /@formatjs[/\\]intl-relativetimeformat[/\\]dist[/\\]locale-data$/,
        regex
),
new webpack.ContextReplacementPlugin(
        /@formatjs[/\\]intl-pluralrules[/\\]dist[/\\]locale-data$/,
        regex
),

After the changes the final build looks way better:

image

artemtam commented 5 years ago

Hey @wiziple I actually think this is quite important. You have 1 MB of unused translations in the example app build, a lot of people use it in production also.

wiziple commented 5 years ago

Updated! Haha thanks for poking me! Yeah, I had no time to do it, and I'm still using old plugin version on my production 😂