Graham/angular-cli
1
0
Fork 0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-18 20:02:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(@angular-devkit/build-angular): use Webpack ChunkGraph API in SuppressExtractedTextChunksWebpackPlugin

Browse Source
This commit is contained in:
Charles Lyding 2020-09-09 19:09:59 -04:00 committed by Alan Agius
parent ed1b10914a
commit f31f853de8
1 changed files with 71 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
packages/angular_devkit/build_angular/src/angular-cli-files/plugins/suppress-entry-chunks-webpack-plugin.ts
View File

@ -5,58 +5,82 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
// tslint:disable
// TODO: cleanup this file, it's copied as is from Angular CLI.
// Remove .js files from entry points consisting entirely of .css|scss|sass|less|styl.
// To be used together with ExtractTextPlugin.
/**
* Remove .js files from entry points consisting entirely of stylesheets.
* To be used together with mini-css-extract-plugin.
*/
export class SuppressExtractedTextChunksWebpackPlugin {
constructor() { }
apply(compiler: any): void {
compiler.hooks.compilation.tap('SuppressExtractedTextChunks', (compilation: any) => {
// find which chunks have css only entry points
const cssOnlyChunks: string[] = [];
const entryPoints = compilation.options.entry;
// determine which entry points are composed entirely of css files
for (let entryPoint of Object.keys(entryPoints)) {
let entryFiles: string[] | string = entryPoints[entryPoint];
// when type of entryFiles is not array, make it as an array
entryFiles = entryFiles instanceof Array ? entryFiles : [entryFiles];
if (entryFiles.every((el: string) =>
el.match(/\.(css|scss|sass|less|styl)$/) !== null)) {
cssOnlyChunks.push(entryPoint);
apply(compiler: import('webpack').Compiler): void {
compiler.hooks.compilation.tap('SuppressExtractedTextChunks', (compilation) => {
compilation.hooks.chunkAsset.tap('SuppressExtractedTextChunks', (chunk, filename) => {
// Remove only JavaScript assets
if (!filename.endsWith('.js')) {
return;
}
}
// Remove the js file for supressed chunks
compilation.hooks.afterSeal.tap('SuppressExtractedTextChunks', () => {
compilation.chunks
.filter((chunk: any) => cssOnlyChunks.indexOf(chunk.name) !== -1)
.forEach((chunk: any) => {
let newFiles: string[] = [];
chunk.files.forEach((file: string) => {
if (file.match(/\.js(\.map)?$/)) {
// remove js files
delete compilation.assets[file];
} else {
newFiles.push(file);
}
// Only chunks with a css asset should have JavaScript assets removed
let hasCssFile = false;
// chunk.files is an Array in Webpack 4 and a Set in Webpack 5
for (const file of chunk.files) {
if (file.endsWith('.css')) {
hasCssFile = true;
break;
}
}
if (!hasCssFile) {
return;
}
// Only chunks with all CSS entry dependencies should have JavaScript assets removed
let cssOnly = false;
// The any cast is used for default Webpack 4 type compatibility
// tslint:disable-next-line: no-any
const entryModules = (compilation as any).chunkGraph?.getChunkEntryModulesIterable(chunk);
if (entryModules) {
// Webpack 5
for (const module of entryModules) {
cssOnly = module.dependencies.every(
(dependency: {}) => dependency.constructor.name === 'CssDependency',
);
if (!cssOnly) {
break;
}
}
} else {
// Webpack 4
for (const module of chunk.modulesIterable as Iterable<{ dependencies: {}[] }>) {
cssOnly = module.dependencies.every((dependency) => {
const name = dependency.constructor.name;
return (
name === 'CssDependency' ||
name === 'SingleEntryDependency' ||
name === 'MultiEntryDependency'
);
});
chunk.files = newFiles;
});
if (!cssOnly) {
break;
}
}
}
if (cssOnly) {
if (Array.isArray(chunk.files)) {
// Webpack 4
(chunk.files as string[]) = chunk.files.filter((file) => file !== filename);
delete compilation.assets[filename];
} else {
// Webpack 5
// Casting is used for default Webpack 4 type compatibility
((chunk.files as unknown) as Set<string>).delete(filename);
((compilation as unknown) as { deleteAsset(file: string): void }).deleteAsset(filename);
}
}
});
// Remove scripts tags with a css file as source, because HtmlWebpackPlugin will use
// a css file as a script for chunks without js files.
// TODO: Enable this once HtmlWebpackPlugin supports Webpack 4
// compilation.plugin('html-webpack-plugin-alter-asset-tags',
// (htmlPluginData: any, callback: any) => {
// const filterFn = (tag: any) =>
// !(tag.tagName === 'script' && tag.attributes.src.match(/\.css$/));
// htmlPluginData.head = htmlPluginData.head.filter(filterFn);
// htmlPluginData.body = htmlPluginData.body.filter(filterFn);
// callback(null, htmlPluginData);
// });
});
}
}