From 0b8e51ee5bf7bae28b4b02331fb20270f40f4550 Mon Sep 17 00:00:00 2001 From: dhruvdutt Date: Wed, 1 Aug 2018 17:27:31 +0530 Subject: [PATCH] feat(migrate): commonChunksPlugin to SplitChunksPlugin --- .../commonsChunkPlugin.test.js.snap | 99 ++++++++++++ .../commonsChunkPlugin-0.input.js | 8 + .../commonsChunkPlugin-1.input.js | 7 + .../commonsChunkPlugin-2.input.js | 7 + .../commonsChunkPlugin-3.input.js | 8 + .../commonsChunkPlugin-4.input.js | 10 ++ .../commonsChunkPlugin.test.js | 9 ++ .../commonsChunkPlugin/commonsChunkPlugin.ts | 147 ++++++++++++++++++ packages/migrate/migrate.ts | 3 + 9 files changed, 298 insertions(+) create mode 100644 packages/migrate/commonsChunkPlugin/__snapshots__/commonsChunkPlugin.test.js.snap create mode 100644 packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-0.input.js create mode 100644 packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-1.input.js create mode 100644 packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-2.input.js create mode 100644 packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-3.input.js create mode 100644 packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-4.input.js create mode 100644 packages/migrate/commonsChunkPlugin/commonsChunkPlugin.test.js create mode 100644 packages/migrate/commonsChunkPlugin/commonsChunkPlugin.ts diff --git a/packages/migrate/commonsChunkPlugin/__snapshots__/commonsChunkPlugin.test.js.snap b/packages/migrate/commonsChunkPlugin/__snapshots__/commonsChunkPlugin.test.js.snap new file mode 100644 index 00000000000..cedf99e5fea --- /dev/null +++ b/packages/migrate/commonsChunkPlugin/__snapshots__/commonsChunkPlugin.test.js.snap @@ -0,0 +1,99 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`commonsChunkPlugin transforms correctly using "commonsChunkPlugin-0" data 1`] = ` +"module.export = { + optimizations: { + splitChunks: { + cacheGroup: { + common: { + name: 'common', + chunks: 'initial' + }, + + vendor: { + name: 'vendor', + test: '/node_modules/', + chunks: 'initial' + }, + + minChunks: 2 + } + } + } +} +" +`; + +exports[`commonsChunkPlugin transforms correctly using "commonsChunkPlugin-1" data 1`] = ` +"module.export = { + optimizations: { + splitChunks: { + cacheGroup: { + common: { + name: 'common', + chunks: 'initial' + }, + + vendor: { + name: 'vendor', + test: '/node_modules/', + chunks: 'initial' + } + } + } + } +} +" +`; + +exports[`commonsChunkPlugin transforms correctly using "commonsChunkPlugin-2" data 1`] = ` +"module.export = { + optimizations: { + splitChunks: { + cacheGroup: { + vendor: { + name: 'vendor', + test: '/node_modules/', + chunks: 'initial' + } + } + } + } +} +" +`; + +exports[`commonsChunkPlugin transforms correctly using "commonsChunkPlugin-3" data 1`] = ` +"module.export = { + optimizations: { + splitChunks: { + cacheGroup: { + commons: { + name: 'commons', + chunks: 'initial' + } + } + } + } +} +" +`; + +exports[`commonsChunkPlugin transforms correctly using "commonsChunkPlugin-4" data 1`] = ` +"module.export = { + optimizations: { + splitChunks: { + cacheGroup: { + main: { + name: 'main' + }, + + chunks: 'async', + minSize: 0, + minChunks: 2 + } + } + } +} +" +`; diff --git a/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-0.input.js b/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-0.input.js new file mode 100644 index 00000000000..6905330e974 --- /dev/null +++ b/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-0.input.js @@ -0,0 +1,8 @@ +module.export = { + plugins: [ + new webpack.CommonsChunkPlugin({ + names: ["common", "vendor"], + minChunks: 2 + }) + ] +} diff --git a/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-1.input.js b/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-1.input.js new file mode 100644 index 00000000000..ceebadf21fd --- /dev/null +++ b/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-1.input.js @@ -0,0 +1,7 @@ +module.export = { + plugins: [ + new webpack.CommonsChunkPlugin({ + names: ["common", "vendor"] + }) + ] +} diff --git a/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-2.input.js b/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-2.input.js new file mode 100644 index 00000000000..679a322ea73 --- /dev/null +++ b/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-2.input.js @@ -0,0 +1,7 @@ +module.export = { + plugins: [ + new webpack.CommonsChunkPlugin({ + names: ["vendor"] + }) + ] +} diff --git a/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-3.input.js b/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-3.input.js new file mode 100644 index 00000000000..ef43c3ce4a9 --- /dev/null +++ b/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-3.input.js @@ -0,0 +1,8 @@ +module.export = { + plugins: [ + new webpack.CommonsChunkPlugin({ + filename: "commons.js", + name: "commons" + }) + ] +} diff --git a/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-4.input.js b/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-4.input.js new file mode 100644 index 00000000000..f992bd5a870 --- /dev/null +++ b/packages/migrate/commonsChunkPlugin/__testfixtures__/commonsChunkPlugin-4.input.js @@ -0,0 +1,10 @@ +module.export = { + plugins: [ + new webpack.CommonsChunkPlugin({ + name: "main", + async: true, + minSize: 0, + minChunks: 2 + }) + ] +} diff --git a/packages/migrate/commonsChunkPlugin/commonsChunkPlugin.test.js b/packages/migrate/commonsChunkPlugin/commonsChunkPlugin.test.js new file mode 100644 index 00000000000..2107021b083 --- /dev/null +++ b/packages/migrate/commonsChunkPlugin/commonsChunkPlugin.test.js @@ -0,0 +1,9 @@ +"use strict"; + +const defineTest = require("@webpack-cli/utils/defineTest").default; + +defineTest(__dirname, "commonsChunkPlugin", "commonsChunkPlugin-0"); +defineTest(__dirname, "commonsChunkPlugin", "commonsChunkPlugin-1"); +defineTest(__dirname, "commonsChunkPlugin", "commonsChunkPlugin-2"); +defineTest(__dirname, "commonsChunkPlugin", "commonsChunkPlugin-3"); +defineTest(__dirname, "commonsChunkPlugin", "commonsChunkPlugin-4"); diff --git a/packages/migrate/commonsChunkPlugin/commonsChunkPlugin.ts b/packages/migrate/commonsChunkPlugin/commonsChunkPlugin.ts new file mode 100644 index 00000000000..8fb24c54de0 --- /dev/null +++ b/packages/migrate/commonsChunkPlugin/commonsChunkPlugin.ts @@ -0,0 +1,147 @@ +import { + addOrUpdateConfigObject, + createIdentifierOrLiteral, + createLiteral, + createProperty, + findAndRemovePluginByName, + findPluginsByName, +} from "@webpack-cli/utils/ast-utils"; + +import { IJSCodeshift, INode } from "../types/NodePath"; + +/** + * + * Transform for CommonsChunkPlugin. If found, removes the + * plugin and sets optimizations.namedModules to true + * + * @param {Object} j - jscodeshift top-level import + * @param {Node} ast - jscodeshift ast to transform + * @returns {Node} ast - jscodeshift ast + */ +export default function(j: IJSCodeshift, ast: INode): INode { + + let pluginProps: INode[]; + const cacheGroupsArray: INode[] = []; + + // find old options + const CommonsChunkPlugin = findPluginsByName(j, ast, ["webpack.CommonsChunkPlugin"]); + + if (!CommonsChunkPlugin.size()) { return ast; } + + CommonsChunkPlugin + .forEach((path: INode): void => { + pluginProps = path.value.arguments[0].properties; // any node + }); + + // create chunk cache group option + function createChunkCache(chunkName) { + const commonProperties: INode[] = [ + createProperty( + j, + "name", + chunkName.value, + ), + ]; + switch (chunkName.value) { + case "vendor": + return j.property( + "init", + createIdentifierOrLiteral(j, chunkName.value), + j.objectExpression([ + ...commonProperties, + createProperty( + j, + "test", + "/node_modules/", + ), + createProperty( + j, + "chunks", + "initial", + ), + ]), + ); + case "common": + case "commons": + return j.property( + "init", + createIdentifierOrLiteral(j, chunkName.value), + j.objectExpression([ + ...commonProperties, + createProperty( + j, + "chunks", + "initial", + ), + ]), + ); + default: + return j.property( + "init", + createIdentifierOrLiteral(j, chunkName.value), + j.objectExpression([ + ...commonProperties, + ]), + ); + } + } + + // iterate old props and map new props + pluginProps.forEach((p: INode): void => { + switch (p.key.name) { + case "names": + p.value.elements.forEach((chunkName) => { + cacheGroupsArray.push( + createChunkCache(chunkName), + ); + }); + break; + case "name": + cacheGroupsArray.push( + createChunkCache(p.value), + ); + break; + case "async": + cacheGroupsArray.push( + createProperty( + j, + "chunks", + "async", + ), + ); + break; + case "minSize": + case "minChunks": + cacheGroupsArray.push( + createProperty( + j, + p.key.name, + p.value.value, + ), + ); + break; + } + }); + + // Remove old plugin + const root: INode = findAndRemovePluginByName(j, ast, "webpack.CommonsChunkPlugin"); + + // Add new optimizations splitChunks option + if (root) { + addOrUpdateConfigObject( + j, + root, + "optimizations", + "splitChunks", + j.objectExpression([ + j.property( + "init", + createIdentifierOrLiteral(j, "cacheGroup"), + j.objectExpression(cacheGroupsArray), + ), + ]), + ); + } + + return ast; +} diff --git a/packages/migrate/migrate.ts b/packages/migrate/migrate.ts index f93cded0c94..6d3ad4ec6f3 100644 --- a/packages/migrate/migrate.ts +++ b/packages/migrate/migrate.ts @@ -3,6 +3,7 @@ import pEachSeries = require("p-each-series"); import pLazy = require("p-lazy"); import bannerPluginTransform from "./bannerPlugin/bannerPlugin"; +import commonsChunkPluginTransform from "./commonsChunkPlugin/commonsChunkPlugin"; import extractTextPluginTransform from "./extractTextPlugin/extractTextPlugin"; import loaderOptionsPluginTransform from "./loaderOptionsPlugin/loaderOptionsPlugin"; import loadersTransform from "./loaders/loaders"; @@ -15,6 +16,7 @@ import uglifyJsPluginTransform from "./uglifyJsPlugin/uglifyJsPlugin"; interface ITransformsObject { bannerPluginTransform: object; + commonsChunkPluginTransform?: object; extractTextPluginTransform: object; loaderOptionsPluginTransform: object; loadersTransform: object; @@ -36,6 +38,7 @@ const transformsObject: ITransformsObject = { extractTextPluginTransform, noEmitOnErrorsPluginTransform, removeDeprecatedPluginsTransform, + commonsChunkPluginTransform, }; /* tslint:enable object-literal-sort-keys */