web-dev-qa-db-fra.com

Angular 2 est trop volumineux

j'utilise le pack webpack mon angular 2, lorsque je regroupe le fichier principal. le fichier est trop volumineux, la taille du fichier est d'environ 8M. puis chaque fois que je rafraîchis ma page, il y aura un long Il est temps que le navigateur charge et exécute les fichiers javascript. Je pense qu'il y a peut-être trop de fichiers dont je n'ai pas besoin, mais comment puis-je le trouver et le retirer de mes fichiers groupés? merci de me donner quelques conseils ou de l'aide.

voici ma partie principale de la configuration de 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
    }

});

j'ai déposé mon fichier vendor.ts voici mon 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';
angularbundle
15
shun

J'essayais angular 2 l'autre jour et j'ai rencontré le même problème que vous, mon vendor.js faisait 6M et c'était une simple application "Hello World" ...

J'ai trouvé le post suivant qui a beaucoup aidé à comprendre comment nous devons agir sur ce problème (pour l'instant): http://blog.mgechev.com/2016/06/26/tree-shaking-angular2 -production-build-rollup-javascript /

Il utilise plusieurs techniques d'optimisation et de compression (précompilation, arborescence, minification, regroupement et gzip) sur son application de 1,5 Mo pour réduire sa taille à seulement 50 Ko.

Vérifiez-le, j'espère que cela vous aidera! :)

EDIT: J'ai eu quelques essais avec Angular depuis, et pour moi, la meilleure approche de travail était d'utiliser l'angular-cli, qui est à la v1.0 lorsque j'écris ceci et lorsque vous exécutez la construction avec --prod, il fait tout ce que j'ai écrit dans mon message d'origine + un serveur Web habituel gzips vos fichiers. Mon site complet est sous 1 Mo avec cela et le sien a beaucoup de fonctionnalités et aussi beaucoup de trucs tiers.

11
Thomas Juhász