介绍

网络重试，改写webpack默认的懒加载机制
使用network-retry-webpack-plugin，可以自动实现多CDN重试机制，对业务无浸入

使用

webpack 配置

const VipkidNetworkRetry = require('network-retry-webpack-plugin');

... ... ,

plugins: [
    ... ... ,

		new VipkidNetworkRetry({
			timeout: 50000,
			domains: ['//s.static.com', '//s.resource.com']
		}),
    ... ... ,
]

懒加载配置

使用webpack分段懒加载后自动实现多CDN重试机制

示例

optimization: {
    minimize: false,
		splitChunks: {
			chunks: 'all',
      minSize: 20000,
      maxSize: 800000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '-',
    }
}

其他文档

插件注入时机

需要webpack先把自己的懒加载器加载完成，然后再去重写
webpack 是在 thisCompilation 时注入名为《JsonpMainTemplatePlugin》jsonpScript,
要修改 JsonpMainTemplatePlugin 的 回调需要在 thisCompilation之后，所以选择了在 compilation 时挂载插件
https://webpack.js.org/api/compiler-hooks/#compilation

webpack4 的懒加载器

webpack4 的懒加载器 原理

https://github.com/webpack/webpack/blob/webpack-4/lib/web/JsonpMainTemplatePlugin.js#L145 

修改方式

修改对应Hook回调的方法

https://github.com/webpack/tapable/blob/v1.1.3/lib/Hook.js