零: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 effectminSize: 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}}}}
};