npmpackage.info

Gathering detailed insights and metrics for @talend/dynamic-cdn-webpack-plugin

@talend/dynamic-cdn-webpack-plugin

14.0.0

57.10 kB

Installations

npm install @talend/dynamic-cdn-webpack-plugin

Developer Guide

BETA

Typescript

No

Module System

N/A

Min. Node Version

>=14

Node Version

20.9.0

NPM Version

10.1.0 Score

39.4

Supply Chain

59.4

Quality

76.7

Maintenance

100

Vulnerability

98.6

License

Releases

Unable to fetch releases

Contributors

Download Statistics

Total Downloads

164,810

Last Day

Last Week

246

Last Month

2,323

Last Year

26,939

Bundle Size

177.21 kB

Minified

57.10 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

14.0.0

Package Id

@talend/dynamic-cdn-webpack-plugin@14.0.0

Unpacked Size

33.30 kB

Size

10.27 kB

File Count

NPM Version

10.1.0

Node Version

20.9.0

Publised On

13 Jun 2024

Total Downloads

Cumulative downloads

Total Downloads

164,810

Last day

-21.8%

Compared to previous day

Last week

-56.5%

246

Compared to previous week

Last month

-5.2%

2,323

Compared to previous month

Last year

-27.6%

26,939

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

dynamic-cdn-webpack-plugin

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.

Install

$ npm install --save-dev @talend/dynamic-cdn-webpack-plugin @talend/module-to-cdn

Compatibility with webpack

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

Usage with HtmlWebpackPlugin

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>

Usage with ManifestPlugin

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}

API

DynamicCdnWebpackPlugin(options)

webpack.config.js

1const DynamicCdnWebpackPlugin = require('@talend/dynamic-cdn-webpack-plugin');
2
3module.exports = {
4	mode: 'production',
5	plugins: [new DynamicCdnWebpackPlugin(options)],
6};

options.disable

Type: boolean
Default: false

Useful when working offline, will fallback to webpack normal behaviour

options.env

Type: string
Default: mode
Values: development, production

Determine if it should load the development or the production version of modules

options.only

Type: Array<string> Default: null

List the only modules that should be served by the cdn

options.exclude

Type: Array<string> Default: []

List the modules that will always be bundled (not be served by the cdn)

options.loglevel

Type: string
Default: ERROR Options: ERROR, INFO, DEBUG

ERROR:

module XX could not be loaded because peerDependency YY is not loaded

INFO:

module XX already loaded in another version

DEBUG:

module XX could not be found in cdn config
module XX will be served http://mycdn.com/XX/version/xx.min.js

options.resolver

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.

options.addURL

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.