score:15
there are a few things that you need to do.
make sure to require
intl/intl
which loads the core library and not all of the associated countries. this will reduce the size of the library from from around 900kb to around 150kb.use webpack's
require.ensure
orrequire([])
functions to dynamically require intl.js only when needed. this will create a separate bundle for just the intl.js file, which will be loaded on an as-needed basis.
lib/shim.js
// shim for intl needs to be loaded dynamically
// so we callback when we're done to represent
// some kind of "shimready" event
module.exports = function(callback) {
if (!window.intl) {
require(['intl/intl'], function(intl) {
window.intl = intl;
callback();
});
} else {
settimeout(callback, 0); // force async
}
};
app.js
var shimready = require('lib/shim');
shimready(startapp);
note: you may also need access to country-specific information and properties. for my basic needs i didn't actually require this data, but if you do be sure to read the section on intl.js website loading locale data.
score:6
an simple (non-webpack) approach would be to do something like this in your html:
<script>
if (!window.intl) { document.write('<script src="/js/intl.min.js"><\/script>'); }
</script>
though document.write
is not considered a best practice, this would provide a blocking approach to solving the problem, resulting in considerably less code in your the application. this solution does not use webpack, but may be a suitable solution for many people in this situation.
Source: stackoverflow.com
Related Query
- How do I add WebPack polyfill to React App created with React Create App without ejecting?
- How to load image files with webpack file-loader
- Add Favicon with React and Webpack
- Testing with Jest and Webpack aliases
- How to import CSS modules with Typescript, React and Webpack
- Remove console.logs with Webpack & Uglify
- how to set up an inline svg with webpack
- How to use images in css with Webpack
- How to avoid React loading twice with Webpack when developing
- Load fonts with Webpack and font-face
- How to set up Babel 6 stage 0 with React and Webpack
- Sass with CSS Modules & Webpack
- Webpack optimize with UglifyJS plugin causes runtime error
- Writing embeddable Javascript plugin with React & Webpack
- How to configure webpack dev server with react router dom v4?
- Mocha tests don't run with Webpack and mocha-loader
- Best way to integrate webpack builds with ASP.NET Core 3.0?
- How to handle deploys with Webpack code splitting?
- how to setup bootstrap 4 scss with react webpack
- Using autoprefixer with postcss in webpack 2.x
- Using the Webpack dev server with a PHP application
- push assets folder to public directory with webpack
- Use CSS Modules in React components with Typescript built by webpack
- Build React components library with Webpack 4
- React Intl FormattedNumber with the currency symbol before, not after
- Remove unused css with React and Webpack
- Using React Router with CDN and without webpack or browserify
- Using Webpack with React-router bundle.js Not Found
- Webpack module federation is not working with eager shared libs
- How to use a webpack dynamic import with a variable query string?
More Query from same tag
- Search Bar fires but no changes take effect - React Hooks
- How to stop handleSubmit updating when rendered to another element?
- How to Add input fields in form when "Other" option is selected in dropdown in React.js
- How to clear react-select value after formik form submission?
- javascript - maintain loaded gltf in browser cache even after unmount / force context loss
- My map gives me Cannot read properties of undefined (reading 'map')
- Handling Date of Birth with <select> fields in redux-form
- Slide Up Transition of React Component
- Why is not displaying my list from my api on my react app?
- How to change Steps Color in ( Ant-design )
- React hooks - right way to clear timeouts and intervals
- Invoking context function not working in React
- ReactJS - I don't understand the syntax used in this function
- Send variable from one component to another in react
- What are the advantages or disadvantages of putting our items in an empty div in React?
- Overflow hidden is making page to jump on top
- React Connection
- Reactjs Browser Tab Close Event
- How to upgrade to babel 7
- Array.fill() retaining previously selected months' dates
- useCallback onChange always shows previous values
- Not able to see anything written inside the return component in JSX
- Dynamic menu based on locations from array of arrays
- How to integrate CSS-Framework and inline styles in GatsbyJS
- State updates but Table doesn't re-render/update
- why react skips displaying values in component?
- How to a drop down-down menu list
- Module '"*.svg"' has no exported member 'ReactComponent'
- Change Parent component based on Child props -> Preact/ React
- About infinite loop in useEffect