Açısal 2 üretim paketi dosyası çok büyük

Question

Ana dosyayı paketlediğimde web paketi paketi açısal 2 projemi kullanıyorum. Dosya çok büyük, dosya boyutu yaklaşık 8M'dir. sonra, sayfamı her ne zaman yenilediğimde, tarayıcının javascript dosyalarını yükleyip yürütmesi için uzun bir zaman olacaktır. Sanırım ihtiyaç duymadığım çok fazla dosya olabilir, ancak onu nasıl bulabilirim ve paket dosyalarından nasıl çıkarabilirim? Bana biraz tavsiye veya yardım için teşekkürler.

i düştü

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 
    } 

}); 

benim vendor.ts benim olayım burada dosya

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: webpack.common.js: Burada

benim ana webpack yapılandırma parçasıdır 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

ben açısal 2 gün deniyordum ve bunu yaparken aynı sorunla karşı karşıya benim vendor.js 6M oldu ve ben buldum

bu ... Basit bir "Merhaba Dünya" uygulaması oldu http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

onun 1.5M uygulamasında çeşitli optimize ve sıkıştırma teknikleri (precompile, treeshake, küçültmek, paket ve gzip) kullanır: biz (şimdilik) bu konuda nasıl davranması gerektiğine anlamada çok yardımcı aşağıdaki sonrası boyutunu sadece 50kb'ye düşürmek için.

Şuna bir bakın, umarım yardımcı olur! :)

DÜZENLEME: O zamandan beri Eğik ile birkaç ishal yaşadım ve benim için en iyi çalışma yaklaşımı yazıyorum zaman v1.0 olan açısal-cli, kullanımı ve --prod ile çalıştırdığınızda orijinal yazımda yazdığım her şeyi yapar + normal bir web sunucusu dosyalarınızı sarar. Komple sitem bununla 1MB'ın altında ve çok sayıda işleve ve ayrıca çok fazla üçüncü tarafa da sahip.

Answer 2

açısal 2 desteği lazyLoad yol bileşen; angular2-router-loader

veya webpack bölünmüş yapılandırmasını kullanabilirsiniz;

ve ayrıca kodunuzu sıkıştırmak için a/uglify kullanabilirsiniz; Bu cevabın u yardım etmesine yardımcı olması dileği ile

.