webpackDemo读书笔记-优快云博客

零:AggressiveSplittingPlugin，

AggressiveSplittingPlugin 可以将 bundle 拆分成更小的 chunk，直到各个 chunk 的大小达到 option 设置的 maxSize。它通过目录结构将模块组织在一起。用于将捆绑包拆分为多个较小的块以改进缓存。这对HTTP2 Web服务器最有效，否则会增加请求数量的开销

		new webpack.optimize.AggressiveSplittingPlugin({
			minSize: 30000,
			maxSize: 50000
		}),
复制代码

一：不见了


复制代码

二：使用chunkhash！

hash：任何一个改动都会影响另外其他的最终文件名。上线后，另外其他文件的浏览器缓存也全部失效。

那么如何避免这个问题呢？

答案就是chunkhash！

根据chunkhash的定义知道，chunkhash是根据具体模块文件的内容计算所得的hash值，所以某个文件的改动只会影响它本身的hash指纹，不会影响其他文件

三: css 代码分离

extract-text-webpack-plugin

四： Code Splitting(代码分离)和Loaders(解析器)

example.js

require("bundle-loader!./file.js")(function(fileJsExports) {
	console.log(fileJsExports);
});
复制代码

file.js

module.exports = "It works";
复制代码

五:代码分离和异步import

通过异步import创建异步上下文,创建后，webpack会将 "1","2"分别单独打包出来

function loadC(name) {
	return import("c/" + name);
}

Promise.all([loadC("1"), loadC("2")]).then(function(arr) {
	console.log("c/1 and c/2 loaded", arr);
});

复制代码

六：利用`import（）`语法创建ContextModule，它们被分成单独的块，如:`./ templates`文件夹中的每个模块。

async function getTemplate(templateName) {
	try {
		let template = await import(`./templates/${templateName}`);
		console.log(template);
	} catch(err) {
		console.error("template error");
		return new Error(err);
	}
}

getTemplate("foo");
getTemplate("bar");
getTemplate("baz");
复制代码

七:如何过滤`import（）`语句的ContextModule结果。

如：在templates文件夹中。只有.js文件会被单独打包， .noimport.js文件不会被单独打包

async function getTemplate(templateName) {
	try {
		let template = await import(
			/* webpackInclude: /\.js$/ */
			/* webpackExclude: /\.noimport\.js$/ */
			`./templates/${templateName}`
		);
		console.log(template);
	} catch(err) {
		console.error(err);
		return new Error(err);
	}
}

getTemplate("foo");
getTemplate("bar");
getTemplate("baz");
getTemplate("foo.noimport");
getTemplate("bar.noimport");
getTemplate("baz.noimport");
复制代码

八: 给import异步导入的模块自定义名称

方式一:
import("./templates/foo" /* webpackChunkName: "chunk-foo" */ ).then(function(foo) {
	console.log('foo:', foo);
})

方式二:
require.ensure([], function(require) {
	var foo = require("./templates/foo");
	console.log('foo:', foo);
}, "chunk-foo1");

方式三:
var createContextVar = "r";
import("./templates/ba" + createContextVar /* webpackChunkName: "chunk-bar-baz" */ ).then(function(bar) {
	console.log('bar:', bar);
})
复制代码

九:将第三方库代码与公共代码分别打包

使用optimization.splitChunks进行自动重复数据删除

	optimization: {
		splitChunks: {
			cacheGroups: {
				commons: {
					chunks: "initial",
					minChunks: 2,
					maxInitialRequests: 5, // The default limit is too small to showcase the effect
					minSize: 0 // This is example is too small to create commons chunks
				},
				vendor: {
					test: /node_modules/,
					chunks: "initial",
					name: "vendor",
					priority: 10,
					enforce: true
				}
			}
		}
	},
复制代码

十:如何将入口点的深层祖先的常见模块拆分为单独的公共块

同九

十一: 创建DLL 或创建library

我觉得这种情况适用于单独编写的工具或组件库

十二: externals的使用

十三: 国际化(i18n)

example.js

console.log(__("Hello World"));
console.log(__("Missing Text"));
复制代码

webpack.config.js

var path = require("path");
var I18nPlugin = require("i18n-webpack-plugin");
var languages = {
	en: null,
	de: require("./de.json")
};
module.exports = Object.keys(languages).map(function(language) {
	return {
		name: language,
		// mode: "development || "production",
		entry: "./example",
		output: {
			path: path.join(__dirname, "dist"),
			filename: language + ".output.js"
		},
		plugins: [new I18nPlugin(languages[language])]
	};
});
复制代码

de.json

{
	"Hello World": "Hallo Welt"
}
复制代码

十四: tree shaking (通过side-effects属性删除无用代码)

example.js

import { a as a1, b as b1 } from "big-module";
import { a as a2, b as b2 } from "big-module-with-flag";

console.log(
	a1,
	b1,
	a2,
	b2
);
复制代码

node_modules/big-module/package.json

{
  "name": "big-module"
}
复制代码

node_modules/big-module-with-flag/package.json

{
  "name": "big-module-with-flag",
  "sideEffects": false
}
复制代码

node_modules/big-module(-with-flag)/index.js

export { a } from "./a";
export { b } from "./b";
export { c } from "./c";
复制代码

十五: 通过webpack配置指定特定的模块单独打包

var path = require("path");
module.exports = {
	// mode: "development || "production",
	entry: {
		vendor1: ["./vendor1"],
		vendor2: ["./vendor2"],
		pageA: "./pageA",
		pageB: "./pageB",
		pageC: "./pageC"
	},
	output: {
		path: path.join(__dirname, "dist"),
		filename: "[name].js"
	},
	optimization: {
		splitChunks: {
			cacheGroups: {
				vendor1: {
					name: "vendor1",
					test: "vendor1",
					enforce: true
				},
				vendor2: {
					name: "vendor2",
					test: "vendor2",
					enforce: true
				}
			}
		}
	}
};


复制代码