diff --git a/docs/rules/dynamic-import-chunkname.md b/docs/rules/dynamic-import-chunkname.md index dd526c891..e8297dfed 100644 --- a/docs/rules/dynamic-import-chunkname.md +++ b/docs/rules/dynamic-import-chunkname.md @@ -120,6 +120,30 @@ import( ); ``` +### `allowEagerMode: true` + +If you want chunk names to be optional when `webpackMode: "eager"` is set, you can set `allowEagerMode: true` in the rule config. + +Given `{ "allowEagerMode": true }`: + + +### valid + +The following patterns are valid: + +```javascript +import('someModule'); + +import( + /* webpackMode: "eager" */ + 'someModule', +); +import( + /* webpackMode: "eager", webpackChunkName: "someModule" */ + 'someModule', +); +``` + ## When Not To Use It If you don't care that webpack will autogenerate chunk names and may blow up browser caches and bundle size reports. diff --git a/src/rules/dynamic-import-chunkname.js b/src/rules/dynamic-import-chunkname.js index a62e5c6c1..400d44433 100644 --- a/src/rules/dynamic-import-chunkname.js +++ b/src/rules/dynamic-import-chunkname.js @@ -25,19 +25,23 @@ module.exports = { webpackChunknameFormat: { type: 'string', }, + allowEagerMode: { + type: 'boolean', + }, }, }], }, create(context) { const config = context.options[0]; - const { importFunctions = [], allowEmpty = false } = config || {}; + const { importFunctions = [], allowEmpty = false, allowEagerMode = false } = config || {}; const { webpackChunknameFormat = '([0-9a-zA-Z-_/.]|\\[(request|index)\\])+' } = config || {}; const paddedCommentRegex = /^ (\S[\s\S]+\S) $/; const commentStyleRegex = /^( ((webpackChunkName: .+)|((webpackPrefetch|webpackPreload): (true|false|-?[0-9]+))|(webpackIgnore: (true|false))|((webpackInclude|webpackExclude): \/.*\/)|(webpackMode: ["'](lazy|lazy-once|eager|weak)["'])|(webpackExports: (['"]\w+['"]|\[(['"]\w+['"], *)+(['"]\w+['"]*)\]))),?)+ $/; const chunkSubstrFormat = ` webpackChunkName: ["']${webpackChunknameFormat}["'],? `; const chunkSubstrRegex = new RegExp(chunkSubstrFormat); + const eagerModeRegex = /webpackMode: ["']eager["']/; function run(node, arg) { const sourceCode = context.getSourceCode(); @@ -54,6 +58,7 @@ module.exports = { } let isChunknamePresent = false; + let isEagerModePresent = false; for (const comment of leadingComments) { if (comment.type !== 'Block') { @@ -92,12 +97,20 @@ module.exports = { return; } + if (eagerModeRegex.test(comment.value)) { + isEagerModePresent = true; + } + if (chunkSubstrRegex.test(comment.value)) { isChunknamePresent = true; } } - if (!isChunknamePresent && !allowEmpty) { + if ( + !isChunknamePresent + && !allowEmpty + && (allowEagerMode ? !isEagerModePresent : true) + ) { context.report({ node, message: diff --git a/tests/src/rules/dynamic-import-chunkname.js b/tests/src/rules/dynamic-import-chunkname.js index c710507b2..5c42e79de 100644 --- a/tests/src/rules/dynamic-import-chunkname.js +++ b/tests/src/rules/dynamic-import-chunkname.js @@ -19,6 +19,9 @@ const allowEmptyOptions = [{ const multipleImportFunctionOptions = [{ importFunctions: ['dynamicImport', 'definitelyNotStaticImport'], }]; +const allowEagerModeOptions = [{ + allowEagerMode: true, +}]; const parser = parsers.BABEL_OLD; const noLeadingCommentError = 'dynamic imports require a leading comment with the webpack chunkname'; @@ -419,6 +422,14 @@ ruleTester.run('dynamic-import-chunkname', rule, { options, parser, }, + { + code: `import( + /* webpackMode: 'eager' */ + 'someModule' + )`, + options: allowEagerModeOptions, + parser, + }, ...SYNTAX_CASES, ], @@ -867,6 +878,22 @@ ruleTester.run('dynamic-import-chunkname', rule, { type: 'CallExpression', }], }, + { + code: `import( + /* webpackMode: "eager" */ + 'someModule' + )`, + options, + parser, + output: `import( + /* webpackMode: "eager" */ + 'someModule' + )`, + errors: [{ + message: chunkNameFormatError, + type: 'CallExpression', + }], + }, { code: `dynamicImport( /* webpackChunkName "someModule" */