与 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

您必须在 angular-cli 项目中才能在重新安装 angular-cli 后使用 build 命令

Angular-cli:使用 ng lint

缺少 .angular-cli.json 文件:Angular