Gathering detailed insights and metrics for webpack5-assets-reload-webpack-plugin
Gathering detailed insights and metrics for webpack5-assets-reload-webpack-plugin
Installations
npm install webpack5-assets-reload-webpack-pluginDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>= 10.0.0
Node Version
16.19.0
NPM Version
6.14.18
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
1.0.0
Package Id
webpack5-assets-reload-webpack-plugin@1.0.0
Unpacked Size
544.71 kB
Size
146.80 kB
File Count
24
NPM Version
6.14.18
Node Version
16.19.0
Published on
Mar 01, 2023
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Dev Dependencies
31
@commitlint/cli@commitlint/config-conventionalclean-webpack-plugincss-loadercssnanocz-conventional-changelogdotenv-clieslinteslint-config-standardeslint-plugin-importeslint-plugin-jsdoceslint-plugin-nodeeslint-plugin-promisehtml-webpack-pluginhuskyjestjsdocless-loaderminamimini-css-extract-pluginnpm-run-allpostcss-importpostcss-preset-envprettierrelease-itrimrafterservconsolewebpackwebpack-cliwebpack-dev-server
webpack5-assets-reload-webpack-plugin
Front-end resource disaster recovery solutions
Development ideas can be found in this article;
Currently only webpack 5 is supported, if you need more versions please raise issues to me, I will deal with it as soon as possible.
Install
1npm i webpack5-assets-reload-webpack-plugin -D
Usage
example
demo：
1// webpack.config.js 2const { AssetsReloadWebpackPlugin } = require('webpack5-assets-reload-webpack-plugin') 3 4module.exports = { 5 // .... 6 plugins: [ 7 new AssetsReloadWebpackPlugin({ 8 // inlineAssets 9 inlineAssets: [ 10 ['https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min1.css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css'], 11 ['https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue2.js', 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js'], 12 ['https://cdnjs.cloudflare.com/ajax/libs/vuex/2.5.0/vuex.js', "https://cdnjs.cloudflare.com/ajax/libs/vuex/2.5.0/vuex.js"], 13 ['https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.7/vue-router.js', "https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.7/vue-router.js"] 14 ], 15 16 // dynamicAssets 17 dynamicAssets: { 18 animate: ['https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min222.css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css'], 19 vue: ['https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue2.js', 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js'], 20 vuex: ['https://cdnjs.cloudflare.com/ajax/libs/vuex/2.5.0/vuex.js', "https://cdnjs.cloudflare.com/ajax/libs/vuex/2.5.0/vuex.js"], 21 vueRouter: ['https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.7/vue-router.js', "https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.7/vue-router.js"] 22 }, 23 24 // chunkAssets 25 chunkAssetsPublicpath: [ 26 'https://www.backupPublic01.com/', 27 'https://www.backupPublic02.com/', 28 'https://www.backupPublic03.com/' 29 ], 30 31 maxChunkAssetsRetries: 4, 32 chunkAssetsRetryDelay: function(times) { 33 return times * 1000 34 } 35 36 }) 37 ] 38}
Distinguish between types of assets
inlineAssets
Synchronized resources inside HTML documents
such as：
1<head> 2 <!-- ... --> 3 <link href="./test.css" rel="stylesheet" > 4 <script type="text/javascript" src="./jquery.js" ></script> 5<head>
chunkAssets
Asynchronously loaded js chunks are usually introduced in webpack using the following
1import('lodash').then(_ => { 2 // ... 3})
dynamicAssets
External assets that need to be loaded manually for certain situations within the project
Because chunk assets have a problem, that is, there is no good way to unload the assets that have been loaded. When chunk a is loaded, and then loaded chunk b, the js and css of chunk a are still in effect in the dom and will not be deleted. What is the problem with this?
For example, in a project with two routes /a/b and /a/c, for some reason /a/b needs antd.css, but /a/c can't use antd.css for historical reasons, and introducing antd.css its global style will break the original /a/c and cause the layout to collapse. Even if you only introduce antd.css in /a/b, as long as the user's access path is /a/b -> /a/c, the layout will be broken.
Options
inlineAssets
options.inlineAssets
Type: two-dimensional array
Default: No default value
Description:
The addresses associated with the same assets are placed in the same array, which can be of any length, and the actual requests are tried in the order in which they are filled in, for example, asstes A, which will first try index 0, return successfully if 0 succeeds, try index 1 if 0 fails, and so on, until there are no more addresses to try.
The assets are inserted into the HTML document in the one-dimensional order of the array.
1{ 2 inlineAssets: [ 3 [ 'assets A backup address 01', 'assets A backup address 02', 'assets A address 03'], 4 [ 'assets B backup address 01', 'assets B backup address 02'], 5 [ 'assets C backup address 01'], 6 ] 7}
Results Preview:
options.inlineAssetsGlobalVariable
Type: string
Default: __CDN_RELOAD__
Description:
The exception handling functions for script and link tags need to be attached to the window, and this parameter can modify the variable name used to attach to the window
chunkAssets
options.chunkAssetsPublicpath
Type: array
Default: []
Description:
The retry strategy for chunk assets is slightly different, we will first access your output.publicPath in webpack and return it if it succeeds, if it fails we will switch publicPath to the address configured by the plugin's chunkAssetsPublicpath parameter and try it one by one. If the maximum number of retries is greater than the combined length of output.publicPath + chunkAssetsPublicpath, all requests exceeding that length will use the address at the end of chunkAssetsPublicpath.
options.chunkAssetsReloadQueryValue
Type: function
Default:
1function (url, times) { 2 if( times === 0 ) { 3 return url 4 } 5 if( url.indexOf('?') === -1 ) { 6 return url + '?reload=' + times 7 }else { 8 return url + '&reload=' + times 9 } 10}
Description:
Control the query parameters for retry requests
options.maxChunkAssetsRetries
Type: number
Default: 3
Description: Maximum number of load retries
options.chunkAssetsRetryDelay
Type: function | number
Default: 3000
Description: The time interval between error retries. The function type accepts a parameter times, indicating the number of retries.
dynamicAssets
options.dynamicAssets
Type: object
Default: No default value
Description:
useage:
1{ 2 dynamicAssets: { 3 // [cdnName]: [backupAddress, backupAddress, ...] 4 vue: [ 5 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue2.js', 6 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js' 7 ] 8 }, 9}
How to use the loader
1window.$cdn.mount('vue', () => { 2 console.log('success') 3}, (error) => { 4 console.log('error') 5}) 6 7window.$cdn.mount( 8 // cdnName 9 'vue', 10 // tag custom Option 11 { crossorigin: 'anonymous' }, 12 // callback 13 () => { 14 console.log('success') 15 }, 16 (error) => { 17 console.log('error') 18 } 19) 20 21// destroy 22window.$cdn.destroy('vue', () => { 23 console.log('success') 24}, (error) => { 25 console.log('error') 26})
options.dynamicAssetsGlobalVariable
Type: string
Default: $cdn
Description:
The plugin needs to hook the specific logic for loading assets to a variable in window, and this parameter controls the name of that variable.
options.inlineCore
Type: boolean
Default: true
Description
Is it inline to the HTML document? False generates a separate JS file
options.inject
Type: head | body
Default: head
Description: At which tag is core code inserted when inlineCore is true
No vulnerabilities found.
No security vulnerabilities found.