npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@talend/dynamic-cdn-webpack-plugin

v13.1.2

Published

Dynamically get your dependencies from a cdn rather than bundling them in your app

Downloads

2,490

Readme

dynamic-cdn-webpack-plugin

NPM

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 [email protected] module-to-cdn

Usage with HtmlWebpackPlugin

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const DynamicCdnWebpackPlugin = require('@talend/dynamic-cdn-webpack-plugin');

module.exports = {
    entry: {
        'app.js': './src/app.js'
    },

    output: {
        path.resolve(__dirname, './build'),
    },

    plugins: [
        new HtmlWebpackPlugin(),
        new DynamicCdnWebpackPlugin()
    ]
}

app.js

import React from 'react';
import { BrowserRouter } from 'react-router-dom';

// ... do react stuff

webpack --mode=production will generate:

/* simplified webpack build */
[function(module, __webpack_exports__, __webpack_require__) {
    module.exports = React;
}),
(function(module, __webpack_exports__, __webpack_require__) {
    module.exports = ReactRouterDOM;
}),
(function(module, __webpack_exports__, __webpack_require__) {
    var react = __webpack_require__(0);
    var reactRouterDOM = __webpack_require__(1);

    /* ... */
})]
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Webpack App</title>
	</head>
	<body>
		<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react.min.js"></script>
		<script
			type="text/javascript"
			src="https://unpkg.com/[email protected]/umd/react-router-dom.min.js"
		></script>
		<script src="build/app.js"></script>
	</body>
</html>

Usage with ManifestPlugin

webpack.config.js

const path = require('path');

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const DynamicCdnWebpackPlugin = require('@talend/dynamic-cdn-webpack-plugin');

module.exports = {
    entry: {
        'app': './src/app.js'
    },

    output: {
        path.resolve(__dirname, './build'),
    },

    plugins: [
        new WebpackManifestPlugin({
            fileName: 'manifest.json'
        }),
        new DynamicCdnWebpackPlugin()
    ]
}

app.js

import React from 'react';
import { BrowserRouter } from 'react-router-dom';

// ... do react stuff

webpack --mode=production will generate:

/* simplified webpack build */
[function(module, __webpack_exports__, __webpack_require__) {
    module.exports = React;
}),
(function(module, __webpack_exports__, __webpack_require__) {
    module.exports = ReactRouterDOM;
}),
(function(module, __webpack_exports__, __webpack_require__) {
    var react = __webpack_require__(0);
    var reactRouterDOM = __webpack_require__(1);

    /* ... */
})]
{
	"app.js": "app.js",
	"react.js": "https://unpkg.com/[email protected]/dist/react.min.js",
	"react-router-dom.js": "https://unpkg.com/[email protected]/umd/react-router-dom.min.js"
}

API

DynamicCdnWebpackPlugin(options)

webpack.config.js

const DynamicCdnWebpackPlugin = require('@talend/dynamic-cdn-webpack-plugin');

module.exports = {
	mode: 'production',
	plugins: [new DynamicCdnWebpackPlugin(options)],
};

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.

Related

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © Thomas Sileghem