Webpack recently released it's support for loading modules via CDN. Even with the feature is behind a experiments flag, it's quite powerful to use. It's quite encouraging to see, the front-end eco-system as a whole, moving towards a less and less undle oriented setup. This helps in saving the time spent on building the projects and even time taken to load them.
Imagine, the time we can save in our CI environments. When bundling, transpiling, polyfilling and optimisation is done ahead of time by the CDN's and all we need is load them.
This improves the amount of speed of developers to build their applications and iterate over them. We have case-studies of projects, who reducted the time of development by 40~50% by adopting code generated from our studio. And that mixed this CDN workflows, boost the time saved to 60% at min.
As we saw in NextJS URL Imports and teleportHQ buildHttp works in the same mechanism. This allows users to load modules from pre-defined url and cache them (caching of the modules doen't happen if the module is served using Cache-control: no-cache header.
More about this feature, can be found directly on the webpack documentation page https://webpack.js.org/configuration/experiments/#experimentsbuildhttp
(Re-take the same video from NextJS URL Imports and teleportHQ )
To use, the generated es-module. You need to enable buildHttp from your webpack.config.js file.
// webpack.config.js
module.exports = {
//...
experiments: {
buildHttp: true,
allowedUri: ['https://jscdn.teleporthq.io']
},
};
More details about the available options can be found here https://webpack.js.org/configuration/experiments/#experimentsbuildhttp
Next you need to add styled-components and styled-system to support the styling.
npm install styled-components styled-system
(or)
yarn add styled-components styled-system
You can use our template using
npx degit https://github.com/teleporthq/webpack-http
and you can start using the comonents.