与 angular-cli 相比,使用 webpack + angular 无法实现相同级别的捆绑优化
Unable to achieve the same level of bundle optimization with webpack + angular as compared to angular-cli
我有两个相同的 Angular 项目,一个是 angular-cli,另一个是使用 @ngtools/webpack 的 Webpack 版本。这两个项目都是 运行 Angular 7.1.4 和 @angular-devkit 0.13.5。 Angular 代码是使用 angular-cli 生成的初始应用程序 module/component。
我遇到的问题是 Webpack 版本正在生成 450 KB 的压缩应用程序包,但 angular-cli 的包是 238 KB。没有 TerserPlugin,angular-cli 的应用程序包是 1.51 MB,Webpack 的输出是 1.62 MB。
对于 angular-cli,我 运行 "ng build --prod=true" 使用此配置:
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
这是我的 Webpack 配置:
{
mode: 'production',
entry: {
app: './src/main',
},
output: {
path: path.resolve(__dirname, 'public'),
filename: "[id].[chunkhash].js",
chunkFilename: "[id].[chunkhash].js",
},
resolve: {
extensions: ['.ts', '.tsx', '.mjs', '.js'],
},
module: {
rules: [
{
test: /\.html$/,
loader: 'raw-loader',
},
{
test: /\.scss$/,
use: [
'to-string-loader',
{
loader: 'css-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
},
]
},
{
test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
loader: 'file-loader',
},
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
loader: '@ngtools/webpack'
},
{
test: /[\/\]@angular[\/\]core[\/\].+\.js$/,
parser: { system: true },
},
{
test: /\.js$/,
use: [
{
loader: '@angular-devkit/build-optimizer/webpack-loader',
options: { sourceMap: false },
},
],
},
]
},
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
terserOptions: {
compress: {
pure_getters: true,
passes: 3,
global_defs: {
ngDevMode: false,
},
},
output: {
ascii_only: true,
comments: false,
safari10: true,
webkit: true,
},
},
})
],
providedExports: true,
usedExports: true,
concatenateModules: true,
runtimeChunk: true,
},
plugins: [
new AngularCompilerPlugin({
tsConfigPath: path.resolve(__dirname, './tsconfig.json'),
entryModule: path.resolve(__dirname, './src/app/app.module#AppModule'),
mainPath: path.resolve(__dirname, './src/main.ts'),
})
]
};
查看带有 BundleAnalyzerPlugin 的捆绑包,两个项目的 node_modules 的统计大小均为 1.52 MB,但 angular-cli 的解析大小为 238 KB,而 Webpack 的解析大小为 441 KB。据我所知,node_modules 中存在大约 100 KB 的差异,即使包(例如 rxjs)是相同的版本。
angular-cli:
网页包:
这是怎么回事,我怎样才能为两个项目实现相同级别的优化?
看起来 Webpack 项目中的问题是 tsconfig "module" 设置是 "commonjs"。将其更改为 "es2015",就像 angular-cli 应用程序中的默认设置一样,现在将应用程序编译为 248 KB。
我有两个相同的 Angular 项目,一个是 angular-cli,另一个是使用 @ngtools/webpack 的 Webpack 版本。这两个项目都是 运行 Angular 7.1.4 和 @angular-devkit 0.13.5。 Angular 代码是使用 angular-cli 生成的初始应用程序 module/component。
我遇到的问题是 Webpack 版本正在生成 450 KB 的压缩应用程序包,但 angular-cli 的包是 238 KB。没有 TerserPlugin,angular-cli 的应用程序包是 1.51 MB,Webpack 的输出是 1.62 MB。
对于 angular-cli,我 运行 "ng build --prod=true" 使用此配置:
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
这是我的 Webpack 配置:
{
mode: 'production',
entry: {
app: './src/main',
},
output: {
path: path.resolve(__dirname, 'public'),
filename: "[id].[chunkhash].js",
chunkFilename: "[id].[chunkhash].js",
},
resolve: {
extensions: ['.ts', '.tsx', '.mjs', '.js'],
},
module: {
rules: [
{
test: /\.html$/,
loader: 'raw-loader',
},
{
test: /\.scss$/,
use: [
'to-string-loader',
{
loader: 'css-loader',
options: {
sourceMap: false
}
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
},
]
},
{
test: /\.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/,
loader: 'file-loader',
},
{
test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
loader: '@ngtools/webpack'
},
{
test: /[\/\]@angular[\/\]core[\/\].+\.js$/,
parser: { system: true },
},
{
test: /\.js$/,
use: [
{
loader: '@angular-devkit/build-optimizer/webpack-loader',
options: { sourceMap: false },
},
],
},
]
},
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
terserOptions: {
compress: {
pure_getters: true,
passes: 3,
global_defs: {
ngDevMode: false,
},
},
output: {
ascii_only: true,
comments: false,
safari10: true,
webkit: true,
},
},
})
],
providedExports: true,
usedExports: true,
concatenateModules: true,
runtimeChunk: true,
},
plugins: [
new AngularCompilerPlugin({
tsConfigPath: path.resolve(__dirname, './tsconfig.json'),
entryModule: path.resolve(__dirname, './src/app/app.module#AppModule'),
mainPath: path.resolve(__dirname, './src/main.ts'),
})
]
};
查看带有 BundleAnalyzerPlugin 的捆绑包,两个项目的 node_modules 的统计大小均为 1.52 MB,但 angular-cli 的解析大小为 238 KB,而 Webpack 的解析大小为 441 KB。据我所知,node_modules 中存在大约 100 KB 的差异,即使包(例如 rxjs)是相同的版本。
angular-cli:
网页包:
这是怎么回事,我怎样才能为两个项目实现相同级别的优化?
看起来 Webpack 项目中的问题是 tsconfig "module" 设置是 "commonjs"。将其更改为 "es2015",就像 angular-cli 应用程序中的默认设置一样,现在将应用程序编译为 248 KB。