Файл сложения с угловым 2 слишком большой

Question

Я использую пакет веб-пакетов для моего углового проекта 2, когда я свяжу основной файл. файл слишком велик, размер файла составляет около 8 МБ. то всякий раз, когда я обновляю свою страницу, браузер будет загружать и выполнять 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/

Он использует несколько оптимизирующих и компрессионные методы (PreCompile, treeshake, преуменьшать, расслоении и GZIP) на его 1,5М приложение чтобы уменьшить его размер до 50 килобайт.

Проверьте это, надейтесь, что это поможет! :)

EDIT: У меня было несколько опытов с Угловым так и для меня лучший рабочий подхода использовать угловой-CLI, который находится на версии 1.0, когда я пишу это и когда вы запускаете сборку с помощью --prod, она делает все, что я написал в своем исходном сообщении + обычный веб-сервер, gzips ваши файлы. Мой полный сайт находится под 1 МБ с этим, и у него много функциональности, а также много сторонних вещей.

Answer 2

угловой 2 опорный компонент lazyLoad; вы можете использовать angular2-router-loader

или вы можете использовать конфигурацию webpack split;

, и вы также можете использовать ato/uglify для zip-кода;

Желание этого ответа может помочь u.