Невозможно достичь такого же уровня оптимизации комплектации с помощью webpack + angular по сравнению с angular-cli - PullRequest
Новая
       14

Невозможно достичь такого же уровня оптимизации комплектации с помощью webpack + angular по сравнению с angular-cli

0 голосов
/ 12 марта 2019

У меня есть два идентичных проекта Angular, один - angular-cli, а другой - версия Webpack, использующая @ ngtools / webpack. Оба проекта работают под управлением Angular 7.1.4 и @ angular-devkit 0.13.5. Код Angular - это начальный модуль / компонент приложения, который генерируется с помощью angular-cli.

Проблема, с которой я столкнулся, заключается в том, что версия Webpack генерирует сжатый пакет приложений размером 450 КБ, но пакет angular-cli составляет 238 КБ. Без TerserPlugin пакет приложений angular-cli составляет 1,51 МБ, а выход Webpack - 1,62 МБ.

Для 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 МБ для обоих проектов, но анализируемый размер angular-cli составляет 238 КБ против 441 КБ для Webpack. Насколько я могу судить, разница в node_modules составляет около 100 КБ, хотя пакеты, такие как rxjs, имеют одинаковую версию.

угловой кли:

Webpack:

Что происходит и как я могу достичь одинакового уровня оптимизации для обоих проектов?

1 Ответ

0 голосов
/ 13 марта 2019

Похоже, проблема в проекте Webpack заключалась в том, что параметром tsconfig "module" было "commonjs". Изменив его на «es2015», как по умолчанию в приложении angular-cli, теперь приложение компилируется до 248 КБ.

...