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压缩你的代码;

希望这个答案可以帮助你。