与 angular-cli 相比,使用 webpack + angular 无法实现相同级别的包优化
Posted
技术标签:
【中文标题】与 angular-cli 相比,使用 webpack + angular 无法实现相同级别的包优化【英文标题】:Unable to achieve the same level of bundle optimization with webpack + angular as compared to angular-cli 【发布时间】:2019-08-02 06:29:36 【问题描述】:我有两个相同的 Angular 项目,一个是 angular-cli,另一个是使用 @ngtools/webpack 的 Webpack 版本。这两个项目都在运行 Angular 7.1.4 和 @angular-devkit 0.13.5。 Angular 代码是使用 angular-cli 生成的初始应用模块/组件。
我遇到的问题是 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)是相同的版本。
角-cli:
网页包:
发生了什么,我怎样才能为两个项目实现相同级别的优化?
【问题讨论】:
【参考方案1】:看起来 Webpack 项目中的问题是 tsconfig“模块”设置为“commonjs”。将其更改为“es2015”,就像 angular-cli 应用程序中的默认设置一样,现在可以将应用程序编译到 248 KB。
【讨论】:
从 commonjs 更改为 es2015 使 webpack 能够使用 tree shaking以上是关于与 angular-cli 相比,使用 webpack + angular 无法实现相同级别的包优化的主要内容,如果未能解决你的问题,请参考以下文章
将 jsonwebtoken 与 angular-cli 应用程序一起使用时出错
为啥 React 需要 Babel 和 Webpack 才能工作?
如何在基于 angular-cli 的混合应用程序中使用 ng-annotate