9

Angular 2 アプリケーションをビルドし、webpack にバンドルします。現時点では、私のアプリケーションはまだ小さいですが、webpack タスクには既に約 10 秒かかります。コンパイルとパッケージ化の所要時間を改善するために、webpack 構成または TypeSript コンパイル オプションを最適化することは可能ですか?

これは私が使用するwebpack構成です:

var webpack = require('webpack');
var LiveReloadPlugin = require('webpack-livereload-plugin');

module.exports = {
  entry: __dirname + '/assets/app/app.ts',
  output: {
    filename: 'myApp.bundle.js',
    path: __dirname + '/build/'
  },
  // Turn on sourcemaps
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.js']
  },
  plugins: [
    new LiveReloadPlugin({
      appendScriptTag: true
    }),
    // Fixes angular 2 warning
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      __dirname
    )
  ],
  module: {
    rules: [{
        enforce: 'pre',
        test: /\.js$/,
        loader: "source-map-loader"
      },
      {
        enforce: 'pre',
        test: /\.tsx?$/,
        use: "ts-loader"
      }
    ]
  }
}

そして tsconfig :

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "pretty": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noUnusedLocals": false,
    "removeComments": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "baseUrl": "./src",
    "typeRoots": ["node_modules/@types"],
    "types": [
      "core-js",
      "systemjs"
    ],
    "outDir": "./build"
  },
  "exclude": [
    "node_modules"
  ]
}

更新 (修正された webpack.config については私の回答を参照してください)

@jpwiddy によって提案された DLL webpack プラグインを試してみます。angular を別のビルドでコンパイルすることで、開発中にアプリケーション コードのみを再構築し、コンパイルにかなりの時間を費やす必要があります。

ただし、出力 JS を調べたところ、ファイル サイズはまったく同じで、内部にまだ角度のあるコードが残っています。

angular ソースの新しい webpack 構成ファイルは次のとおりです。

var webpack = require('webpack');

module.exports = {
  entry: {
      angular:[
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/core',
        '@angular/common',
        '@angular/compiler',
        '@angular/http',
        '@angular/router',
        '@angular/forms'        
    ]
  },
  output: {
    filename: 'ng2.dll.js',
    path: __dirname + '/build/',
    library: 'ng2'
  },
  plugins: [
    // Fixes angular 2 warning
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      __dirname
    ),
    new webpack.DllPlugin({ 
        name: 'ng2', 
        path: __dirname + '/build/ng2.json'
    })
  ]
}

そして、アプリケーションの更新された webpack 構成:

var webpack = require('webpack');
var LiveReloadPlugin = require('webpack-livereload-plugin');

module.exports = {
  entry: __dirname + '/assets/app/app.ts',
  output: {
    filename: 'myApp.bundle.js',
    path: __dirname + '/build/'
  },
  // Turn on sourcemaps
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.js']
  },
  plugins: [
    new LiveReloadPlugin({
      appendScriptTag: true
    }),
    // Fixes angular 2 warning
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      __dirname
    ),
    new webpack.DllReferencePlugin({
      context: __dirname + '/build/',
      manifest: require(__dirname + '/build/ng2.json')
    })
  ],
  module: {
    rules: [{
        enforce: 'pre',
        test: /\.js$/,
        loader: "source-map-loader"
      },
      {
        enforce: 'pre',
        test: /\.tsx?$/,
        use: "ts-loader"
      }
    ]
  }
}

これは、アプリケーションの JS 出力で見つけた角度コードの 1 つです。

_TsEmitterVisitor.prototype.visitBuiltintType = function (type, ctx) {
    var typeStr;
    switch (type.name) {
        case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Bool:
            typeStr = 'boolean';
            break;
        case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Dynamic:
            typeStr = 'any';
            break;
        case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Function:
            typeStr = 'Function';
            break;
        case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Number:
            typeStr = 'number';
            break;
        case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].Int:
            typeStr = 'number';
            break;
        case __WEBPACK_IMPORTED_MODULE_2__output_ast__["R" /* BuiltinTypeName */].String:
            typeStr = 'string';
            break;
        default:
            throw new Error("Unsupported builtin type " + type.name);
    }
    ctx.print(typeStr);
    return null;
 };

出力にAngularソースを含むwebpackを防ぐために、新しい構成で何かを見逃しましたか?

ありがとうございました

4

2 に答える 2

0

新しいモジュールwebpack-dll-bundles-plugin (バックグラウンドでDllPluginとDllReferencePluginを使用) を使用して構成を修正し、探していたものを正確に実行しました: Angular 2 のビルドを独自のバンドルに分離し、再構築を回避しました。アプリケーション コードを再構築するたびに、バンドル全体を (ウォッチャーなどで) 再構築します。

リビルド時間が 10 秒から 1 秒に短縮されました。

これが私の新しいwebpack構成です:

var webpack = require('webpack');
var LiveReloadPlugin = require('webpack-livereload-plugin');
const DllBundlesPlugin = require('webpack-dll-bundles-plugin').DllBundlesPlugin;

module.exports = {
  entry: __dirname + '/assets/app/app.ts',
  output: {
    filename: 'myApp.bundle.js',
    path: __dirname + '/build/'
  },
  // Turn on sourcemaps
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.js']
  },
  plugins: [
    new LiveReloadPlugin({
      appendScriptTag: true
    }),
    // Fixes angular 2 warning
    new webpack.ContextReplacementPlugin(
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
      __dirname
    ),
    new DllBundlesPlugin({
        bundles: {
          vendor: [
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/core',
            '@angular/common',
            '@angular/forms',
            '@angular/http',
            '@angular/router',
            'rxjs',
          ]
        },
        dllDir:  __dirname + '/build/',
        webpackConfig: {}
      })
  ],
  module: {
    rules: [{
        enforce: 'pre',
        test: /\.js$/,
        loader: "source-map-loader"
      },
      {
        enforce: 'pre',
        test: /\.tsx?$/,
        use: "ts-loader"
      }
    ]
  }
}
于 2017-03-02T17:09:35.590 に答える