Angular 2生產包文件太大

Question

我使用webpack捆綁my angular 2項目，當我捆綁主文件時。該文件太大，文件大小約爲8M。那麼無論何時刷新我的頁面，瀏覽器都將有很長的時間加載並執行JavaScript文件。 我認爲可能有太多的文件我不需要，但我怎麼才能找到它並將其從我的捆綁文件中踢出去？ 謝謝你給我一些建議或一些幫助。

這裏是我的WebPack配置的主要部分： webpack.common.js：

const webpack = require('webpack'); 
const helpers = require('./helpers'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; 

module.exports = { 
    baseUrl: './', 
    entry: { 
     // 'polyfills': './src/polyfills.ts', 
     // 'vendor': './src/vendor.ts', 
     'main': './src/main.ts' 
    }, 
    resolve: { 
     extensions: ['', '.ts', '.js', '.json'], 
     root: helpers.root('src'), 
     modulesDirectories: ['node_modules'], 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.ts$/, 
       loaders: ['awesome-typescript-loader', 'angular2-template-loader'], 
       exclude: [/\.(spec|e2e)\.ts$/] 
      }, 
      { 
       test: /\.json$/, 
       loader: 'json-loader' 
      }, 
      { 
       test: /\.css$/, 
       loaders: ['raw-loader'] 
      }, 
      { 
       test: /\.html$/, 
       loader: 'raw-loader', 
       exclude: [helpers.root('src/index.html')] 
      }, 
      { 
       test: /\.scss$/, 
       loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader 
      }, 
      { 
       test: /\.(jpg|png|gif)$/, 
       loader: 'file' 
      }, 
      { 
       test: /.(png|woff(2)?|eot|ttf|svg)$/, 
       loader: 'url-loader' 
      } 
     ] 

    }, 
    plugins: [ 
     new ForkCheckerPlugin(), 
     // new CopyWebpackPlugin([ 
     //  {from: 'src/assets', to: 'assets'}, 
     //  {from: 'src/app/i18n', to: 'app/i18n'}, 
     //  {from: 'src/loading.css', to: 'loading.css'}, 
     //  {from: 'src/fonts', to: 'fonts'}, 
     //  {from: 'src/favicon.ico', to: ''}, 
     //  {from: 'src/img', to: 'img'}]), 
     new HtmlWebpackPlugin({ 
      template: 'src/index.html', 
      chunksSortMode: 'dependency' 
     }) 
    ], 

    node: { 
     global: 'window', 
     crypto: 'empty', 
     process: true, 
     module: false, 
     clearImmediate: false, 
     setImmediate: false 
    } 

}; 

webpack.prod.js

const helpers = require('./helpers'); 
const webpackMerge = require('webpack-merge'); // used to merge webpack configs 
const commonConfig = require('./webpack.common.js'); // the settings that are common to prod and dev 
/** 
* Webpack Plugins 
*/ 
const webpack = require('webpack'); 
const ProvidePlugin = require('webpack/lib/ProvidePlugin'); 
const DefinePlugin = require('webpack/lib/DefinePlugin'); 
const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin'); 
const IgnorePlugin = require('webpack/lib/IgnorePlugin'); 
const DedupePlugin = require('webpack/lib/optimize/DedupePlugin'); 
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'); 
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; 
const ENV = process.env.NODE_ENV = process.env.ENV = 'production'; 
const HOST = process.env.HOST || 'localhost'; 

module.exports = webpackMerge(commonConfig, { 
    devtool: 'source-map', 

    output: { 
     path: helpers.root('dist'), 
     filename: '[name].bundle.js', 
     chunkFilename: '[id].chunk.js' 
    }, 

    plugins: [ 
     // new webpack.NoErrorsPlugin(), // 如果出現任何錯誤 就終止構建 
     // new DedupePlugin(), // 檢測完全相同(以及幾乎完全相同)的文件 並把它們從輸出中移除 
     // new webpack.optimize.CommonsChunkPlugin({ 
     //  name: ['polyfills', 'vendor', 'main'].reverse() 
     // }), 
     new UglifyJsPlugin({ 
      beautify: false, 
      mangle: { screw_ie8 : true, keep_fnames: true }, 
      compress: { screw_ie8: true, warnings: false }, 
      comments: false 
     }), 
     // new ExtractTextPlugin('[name].[hash].css'), // 把內嵌的 css 抽取成玩不文件 併爲其文件名添加 hash 後綴 使得瀏覽端緩存失效 
     new DefinePlugin({ // 定義環境變量 
      'process.env': { 
       ENV: JSON.stringify(ENV) 
      } 
     }), 
    ], 

    htmlLoader: { 
     minimize: true, 
     removeAttributeQuotes: false, 
     caseSensitive: true, 
     customAttrSurround: [ 
      [/#/, /(?:)/], 
      [/\*/, /(?:)/], 
      [/\[?\(?/, /(?:)/] 
     ], 
     customAttrAssign: [/\)?\]?=/] 
    }, 

    tslint: { 
     emitErrors: true, 
     failOnHint: true, 
     resourcePath: 'src' 
    }, 

    node: { 
     global: 'window', 
     crypto: 'empty', 
     process: false, 
     module: false, 
     clearImmediate: false, 
     setImmediate: false 
    } 

}); 

我放下vendor.ts文件 這裏是我的polyfills.ts

// This file includes polyfills needed by Angular 2 and is loaded before 
// the app. You can add your own extra polyfills to this file. 
// Added parts of es6 which are necessary for your project or your browser support requirements. 
import 'core-js/es6/symbol'; 
import 'core-js/es6/object'; 
import 'core-js/es6/function'; 
import 'core-js/es6/parse-int'; 
import 'core-js/es6/parse-float'; 
import 'core-js/es6/number'; 
import 'core-js/es6/math'; 
import 'core-js/es6/string'; 
import 'core-js/es6/date'; 
import 'core-js/es6/array'; 
import 'core-js/es6/regexp'; 
import 'core-js/es6/map'; 
import 'core-js/es6/set'; 
import 'core-js/es6/reflect'; 
import 'core-js/es6/weak-map'; 
import 'core-js/es6/weak-set'; 

import 'core-js/es7/reflect'; 
import 'zone.js/dist/zone'; 

Answer 1

我嘗試角2有一天，我面臨着同樣的問題，因爲你這樣做，我vendor.js爲6M，這是一個簡單的「Hello World」應用程序...

我發現以下後，在瞭解我們應該如何採取行動對這個問題（現在）幫助了很多： http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

他用他的1.5M幾個應用程序優化和壓縮技術（預編譯，treeshake，縮小，捆綁和gzip）將其尺寸縮小至僅50kb。

看看它，希望它有幫助！ :)

編輯： 我已經與角幾運行以來，對我來說最好的工作方法是使用角CLI，這是在1.0版的時候我在寫這和當你使用--prod運行構建時，它會完成我在原始文章中編寫的所有內容+通常的Web服務器gzip你的文件。我的完整站點在1MB以下，而且他有很多功能，還有很多第三方的東西。

Answer 2

angular 2支持lazyLoad路由組件;你可以使用 angular2-router-loader

或者你可以使用webpack split config;

你也可以使用ato/uglify壓縮你的代碼;

希望這個答案可以幫助你。