g3tr1ght

Images optimization with webpack

To prebuild images for various breakpoints using webpack and implement them with responsive design, you should use build-time tools to generate the different image sizes and then use HTML's srcset and picture elements for implementation, as using CSS media queries to change image sources is less efficient. [1, 2, 3, 4]

1. Prebuilding Images with Webpack

Use a webpack plugin and image processing library to automatically generate multiple image sizes during the build process. A common combination is the image-minimizer-webpack-plugin with sharp. [5, 6]

Webpack Configuration Example (webpack.config.js):

const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

The gist: by having a Promise adopt the state of a forever pending one, you can suspend its then handlers chain.

Promise.pending = Promise.race.bind(Promise, [])

let cancel

new Promise(function(fulfill, reject) {
  cancel = function() {fulfill(Promise.pending())}
  setTimeout(fulfill, 1000, 5)

The idea behind bundle splitting is pretty simple. If you have one giant file, and change one line of code, the user must download that entire file again. But if you’d split it into two files, then the user would only need to download the one that changed, and the browser would serve the other file from cache. It’s worth noting that since bundle splitting is all about caching, it makes no difference to first time visitors.

Webpack has some clever defaults which we override here, like a maximum of 3 files when splitting the output files, and a minimum file size of 30 KB (all smaller files would be joined together).
cacheGroups is where we define rules for how Webpack should group chunks into output files. We have one here called ‘vendor’ that will be used for any module being loaded from node_modules. Normally, you would just define a name for the output file as a string. But we're defining name as a function (which will be called for every parsed file) then returning the name of the package from the pa

	/**
	* Deep diff between two object, using lodash
	* @param {Object} object Object compared
	* @param {Object} base Object to compare with
	* @return {Object} Return a new object who represent the diff
	*/
	function difference(object, base) {
	function changes(object, base) {
	return _.transform(object, function(result, value, key) {
	if (!_.isEqual(value, base[key])) {

	// Promise.all is good for executing many promises at once
	Promise.all([
	promise1,
	promise2
	]);

	// Promise.resolve is good for wrapping synchronous code
	Promise.resolve().then(function () {
	if (somethingIsNotRight()) {
	throw new Error("I will be rejected asynchronously!");

	{
	"scripts": {
	"build": "npm run build:es2015 && npm run build:esm && npm run build:cjs && npm run build:umd && npm run build:umd:min",
	"build:es2015": "tsc --module es2015 --target es2015 --outDir dist/es2015",
	"build:esm": "tsc --module es2015 --target es5 --outDir dist/esm",
	"build:cjs": "tsc --module commonjs --target es5 --outDir dist/cjs",
	"build:umd": "rollup dist/esm/index.js --format umd --name YourLibrary --sourceMap --output dist/umd/yourlibrary.js",
	"build:umd:min": "cd dist/umd && uglifyjs --compress --mangle --source-map --screw-ie8 --comments --o yourlibrary.min.js -- yourlibrary.js && gzip yourlibrary.min.js -c > yourlibrary.min.js.gz",
	}
	}

	const execFileSync = require('child_process').execFileSync;

	const exec = (command, args) => {
	console.log('> ' + [command].concat(args).join(' '));
	const options = {
	cwd: process.cwd(),
	env: process.env,
	stdio: 'pipe',
	encoding: 'utf-8',
	};

	// polyfills.js
	require('whatwg-fetch');
	require('intl');
	require('url-polyfill');
	require('core-js/web/dom-collections');
	require('core-js/es6/promise');
	require('core-js/es6/map');
	require('core-js/es6/string');
	require('core-js/es6/array');
	require('core-js/es6/object');

	{
	entry: './src/module.js',
	output: {
	filename: 'module.js',
	path: path.resolve(__dirname, 'dist'),
	libraryTarget: 'module'
	},
	experiments: {
	outputModule: true,
	},