Angular 8与Webpack 3.7渲染速度极慢

Question

从Webpack开始渲染(刷新)或1.15s+需要35秒。

我试过优化Webpack，启动它的速度变得更快了，但大部分时间都是在加载main.js并处理它之后发生的。

我做了侧写，但搞不懂哪部分花了这么长时间。

如何加快开发速度？每次文件更改都要花费我们35-60秒的时间来预览和测试。

    {
  "name": "....",
  "version": "0.0.0",
  "scripts": {
    "start": "webpack-dev-server --env.NODE_ENV=development --https --mode development --open",
    "start:prod": "webpack-dev-server --env.NODE_ENV=production --https --open"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^8.1.3",
    "@angular/compiler": "^8.1.3",
    "@angular/core": "^8.1.3",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "^8.1.3",
    "@angular/platform-browser": "^8.1.3",
    "@angular/platform-browser-dynamic": "^8.1.3",
    "@angular/router": "^8.2.0",
    "@types/google.analytics": "0.0.40",
    "angular-svg-icon": "^7.2.1",
    "cross-env": "^5.2.0",
    "crypto-js": "^3.1.9-1",
    "dotenv": "^8.1.0",
    "firebase": "^6.3.4",
    "google-libphonenumber": "^3.0.9",
    "hammerjs": "^2.0.8",
    "ngx-international-phone-number": "^1.0.4",
    "ngx-swiper-wrapper": "^8.0.2",
    "rxjs": "~6.4.0",
    "rxjs-compat": "^6.5.2",
    "sass-resources-loader": "^2.0.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.801.3",
    "@angular/animations": "^8.2.0",
    "@angular/cdk": "^8.1.2",
    "@angular/cli": "^8.2.1",
    "@angular/compiler-cli": "^8.1.3",
    "@angular/language-service": "^8.1.3",
    "@angular/material": "^8.1.2",
    "@types/jasmine": "^3.3.16",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^11.13.20",
    "angular2-template-loader": "^0.6.2",
    "codelyzer": "^5.0.0",
    "html-webpack-plugin": "^3.2.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.6",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "moment": "^2.24.0",
    "ngx-daterangepicker-material": "^2.1.8",
    "node-sass": "^4.12.0",
    "protractor": "~5.4.0",
    "raw-loader": "^1.0.0",
    "sass-loader": "^7.1.0",
    "ts-loader": "^5.4.5",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "3.4.5",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6",
    "webpack-dev-server": "^3.7.2"
  }
}

Webpack配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = env => {
  return {
    entry: './src/main.ts',
    resolve: {
      extensions: ['.ts', '.js'],
      alias: {
        styles: path.resolve(__dirname, '../src/styles')
      }
    },
    output: {
      pathinfo: false
    },
    devServer: {
      historyApiFallback: true
    },
    optimization: {
      removeAvailableModules: false,
      removeEmptyChunks: false,
      splitChunks: false
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: ['ts-loader', 'angular2-template-loader']
        },
        {
          test: /\.html$/,
          use: 'raw-loader'
        },
        {
          test: /\.scss$/,
          loader: ["raw-loader", "sass-loader", {
            loader: 'sass-resources-loader',
            options: {
              resources: ['./src/styles.scss']
            },
          }]
        },
        {
          // Hide import warnings
          test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
          parser: {system: true},
        },
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({template: './src/index.html'}),
      new webpack.DefinePlugin({"process.env.NODE_ENV": JSON.stringify(env.NODE_ENV)})
    ]
  }
}

​

​

Answer 1

对于这条规则

{
  test: /\.ts$/,
  use: ['ts-loader', 'angular2-template-loader']
},

您需要添加排除以排除node_modules包

{
  test: /\.ts$/,
  exclude: /node_modules/,
  use: ['ts-loader', 'angular2-template-loader']
},