Gathering detailed insights and metrics for @talend/dynamic-cdn-webpack-plugin
Gathering detailed insights and metrics for @talend/dynamic-cdn-webpack-plugin
Gathering detailed insights and metrics for @talend/dynamic-cdn-webpack-plugin
Gathering detailed insights and metrics for @talend/dynamic-cdn-webpack-plugin
npm install @talend/dynamic-cdn-webpack-plugin
Typescript
Module System
Min. Node Version
Node Version
NPM Version
Total Downloads
185,389
Last Day
191
Last Week
1,057
Last Month
4,337
Last Year
32,868
Latest Version
14.1.0
Package Id
@talend/dynamic-cdn-webpack-plugin@14.1.0
Unpacked Size
33.30 kB
Size
10.26 kB
File Count
9
NPM Version
10.1.0
Node Version
20.9.0
Published on
Jul 09, 2025
Cumulative downloads
Total Downloads
Last Day
23.2%
191
Compared to previous day
Last Week
13.9%
1,057
Compared to previous week
Last Month
54.8%
4,337
Compared to previous month
Last Year
10.5%
32,868
Compared to previous year
1
Dynamically get your dependencies from a cdn rather than bundling them in your app
Warning: This module is a fork from https://github.com/mastilver/dynamic-cdn-webpack-plugin. We start to fork after month without update and because we need to ship our libs and project over CDN leverage UMD builds.
The underlying module-to-cdn for the same reason has also been forked https://npmjs.org/package/@talend/module-to-cdn.
$ npm install --save-dev @talend/dynamic-cdn-webpack-plugin @talend/module-to-cdn
If you are using webpack --version <= 3
then you should be installing with the following command.
$ npm install --save-dev dynamic-cdn-webpack-plugin@3.4.1 module-to-cdn
webpack.config.js
1const path = require('path'); 2 3const HtmlWebpackPlugin = require('html-webpack-plugin'); 4const DynamicCdnWebpackPlugin = require('@talend/dynamic-cdn-webpack-plugin'); 5 6module.exports = { 7 entry: { 8 'app.js': './src/app.js' 9 }, 10 11 output: { 12 path.resolve(__dirname, './build'), 13 }, 14 15 plugins: [ 16 new HtmlWebpackPlugin(), 17 new DynamicCdnWebpackPlugin() 18 ] 19}
app.js
1import React from 'react'; 2import { BrowserRouter } from 'react-router-dom'; 3 4// ... do react stuff
webpack --mode=production
will generate:
1/* simplified webpack build */ 2[function(module, __webpack_exports__, __webpack_require__) { 3 module.exports = React; 4}), 5(function(module, __webpack_exports__, __webpack_require__) { 6 module.exports = ReactRouterDOM; 7}), 8(function(module, __webpack_exports__, __webpack_require__) { 9 var react = __webpack_require__(0); 10 var reactRouterDOM = __webpack_require__(1); 11 12 /* ... */ 13})]
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Webpack App</title> 6 </head> 7 <body> 8 <script type="text/javascript" src="https://unpkg.com/react@15.5.3/dist/react.min.js"></script> 9 <script 10 type="text/javascript" 11 src="https://unpkg.com/react-router-dom@4.1.1/umd/react-router-dom.min.js" 12 ></script> 13 <script src="build/app.js"></script> 14 </body> 15</html>
webpack.config.js
1const path = require('path'); 2 3const { WebpackManifestPlugin } = require('webpack-manifest-plugin'); 4const DynamicCdnWebpackPlugin = require('@talend/dynamic-cdn-webpack-plugin'); 5 6module.exports = { 7 entry: { 8 'app': './src/app.js' 9 }, 10 11 output: { 12 path.resolve(__dirname, './build'), 13 }, 14 15 plugins: [ 16 new WebpackManifestPlugin({ 17 fileName: 'manifest.json' 18 }), 19 new DynamicCdnWebpackPlugin() 20 ] 21}
app.js
1import React from 'react'; 2import { BrowserRouter } from 'react-router-dom'; 3 4// ... do react stuff
webpack --mode=production
will generate:
1/* simplified webpack build */ 2[function(module, __webpack_exports__, __webpack_require__) { 3 module.exports = React; 4}), 5(function(module, __webpack_exports__, __webpack_require__) { 6 module.exports = ReactRouterDOM; 7}), 8(function(module, __webpack_exports__, __webpack_require__) { 9 var react = __webpack_require__(0); 10 var reactRouterDOM = __webpack_require__(1); 11 12 /* ... */ 13})]
1{ 2 "app.js": "app.js", 3 "react.js": "https://unpkg.com/react@15.5.3/dist/react.min.js", 4 "react-router-dom.js": "https://unpkg.com/react-router-dom@4.1.1/umd/react-router-dom.min.js" 5}
webpack.config.js
1const DynamicCdnWebpackPlugin = require('@talend/dynamic-cdn-webpack-plugin'); 2 3module.exports = { 4 mode: 'production', 5 plugins: [new DynamicCdnWebpackPlugin(options)], 6};
Type: boolean
Default: false
Useful when working offline, will fallback to webpack normal behaviour
Type: string
Default: mode
Values: development
, production
Determine if it should load the development or the production version of modules
Type: Array<string>
Default: null
List the only modules that should be served by the cdn
Type: Array<string>
Default: []
List the modules that will always be bundled (not be served by the cdn)
Type: string
Default: ERROR
Options: ERROR, INFO, DEBUG
ERROR:
INFO:
DEBUG:
Type: string
, function
Default: '@talend/module-to-cdn'
Allow you to define a custom module resolver, it can either be a function
or an npm module.
The resolver should return (or resolve as a Promise) either null
or an object
with the keys: name
, var
, url
, version
.
Type: function
This function should be aligned with the resolver to support dependencies manifest. It take builted info from it and add cdn url to the info structure to have align values.
Thanks goes to these wonderful people (emoji key):
Thomas Sileghem 💻 📖 ⚠️ | Faizaan 💬 💻 📖 | MICHAEL JACKSON 💡 | fedeoo 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT © Thomas Sileghem
No vulnerabilities found.
No security vulnerabilities found.