I am using angular 5 for my project, with webpack 3.10. When i try to build the application, the build has main bundle file of approximately 2.8 MB, which creates performance issues in the production. I am using "npm run build:prod --aot --build-optimizer" to build application. I went through other stack overflow articles to figure the solution, and realised that the build i am having does not contain vendor file. i tried using different ways suggested by various articles but all in vain. please help in this. for reference i am uploading my webpack.config.js, webpack.common.js, webpack.prod.js, main.browser.ts, polyfills.ts
webpack.config.js
switch (process.env.NODE_ENV) {
case 'prod':
case 'production':
module.exports = require('./config/webpack.prod')({env: 'production'});
break;
case 'test':
case 'testing':
module.exports = require('./config/webpack.test')({env: 'test'});
break;
case 'dev':
case 'development':
default:
module.exports = require('./config/webpack.dev')({env: 'development'});
}webpack.common.js
const helpers = require('./helpers');
/**
* Webpack Plugins
*
* problem with copy-webpack-plugin
*/
const DefinePlugin = require('webpack/lib/DefinePlugin');
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlElementsPlugin = require('./html-elements-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const ngcWebpack = require('ngc-webpack');
const buildUtils = require('./build-utils');
/**
* Webpack configuration
*
* See: http://webpack.github.io/docs/configuration.html#cli
*/
module.exports = function (options) {
const isProd = options.env === 'production';
const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, options.metadata || {});
const ngcWebpackConfig = buildUtils.ngcWebpackSetup(isProd, METADATA);
const supportES2015 = buildUtils.supportES2015(METADATA.tsConfigPath);
const entry = {
polyfills: './src/polyfills.browser.ts',
main: './src/main.browser.ts'
};
Object.assign(ngcWebpackConfig.plugin, {
tsConfigPath: METADATA.tsConfigPath,
mainPath: entry.main
});
return {
entry: entry,
resolve: {
mainFields: [ ...(supportES2015 ? ['es2015'] : []), 'browser', 'module', 'main' ],
extensions: ['.ts', '.js', '.json'],
modules: [helpers.root('src'), helpers.root('node_modules')],
alias: buildUtils.rxjsAlias(supportES2015)
},
module: {
rules: [
...ngcWebpackConfig.loaders,
{
test: /\.css$/,
use: ['to-string-loader', 'css-loader'],
exclude: [helpers.root('src', 'styles')]
},
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', 'sass-loader'],
exclude: [helpers.root('src', 'styles')]
},
{
test: /\.html$/,
use: 'raw-loader',
exclude: [helpers.root('src/index.html')]
},
/**
* File loader for supporting images, for example, in CSS files.
*/
{
test: /\.(jpg|png|gif)$/,
use: 'file-loader'
},
/* File loader for supporting fonts, for example, in CSS files.
*/
{
test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
use: 'file-loader'
}
],
},
plugins: [
new DefinePlugin({
'ENV': JSON.stringify(METADATA.ENV),
'HMR': METADATA.HMR,
'AOT': METADATA.AOT,
'process.env.ENV': JSON.stringify(METADATA.ENV),
'process.env.NODE_ENV': JSON.stringify(METADATA.ENV),
'process.env.HMR': METADATA.HMR
}),
new CommonsChunkPlugin({
name: 'polyfills',
chunks: ['polyfills']
}),
new CommonsChunkPlugin({
minChunks: Infinity,
name: 'inline'
}),
new CommonsChunkPlugin({
name: 'main',
async: 'common',
children: true,
minChunks: 2
}),
new CopyWebpackPlugin([
{ from: helpers.root('src/assets'), to: 'assets' },
{ from: helpers.root('src/assets/img'), to: 'assets/img' },
{ from: helpers.root('src/meta')},
{ from: helpers.root('node_modules/font-awesome'), to: 'font-awesome' },
{ from: helpers.root('node_modules/primeng/resources/primeng.min.css'), to: 'resources' },
{ from: helpers.root('node_modules/primeng/resources/themes/_theme.scss'), to: 'resources/themes' },
{ from: helpers.root('src/assets/css/themes/citi-prime'), to: 'resources/themes/citi-prime' }
],
isProd ? { ignore: [ 'mock-data/**/*' ] } : undefined
),
/*
* Plugin: HtmlWebpackPlugin
* Description: Simplifies creation of HTML files to serve your webpack bundles.
* This is especially useful for webpack bundles that include a hash in the filename
* which changes every compilation.
*
* See: https://github.com/ampedandwired/html-webpack-plugin
*/
new HtmlWebpackPlugin({
template: 'src/index.html',
title: METADATA.title,
chunksSortMode: function (a, b) {
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"];
return entryPoints.indexOf(a.names[0]) - entryPoints.indexOf(b.names[0]);
},
metadata: METADATA,
inject: 'body',
xhtml: true,
minify: isProd ? {
caseSensitive: true,
collapseWhitespace: true,
keepClosingSlash: true
} : false//,
//baseUrl: isProd ? '.' : '/'
}),
new ScriptExtHtmlWebpackPlugin({
sync: /inline|polyfills|vendor/,
defaultAttribute: 'async',
preload: [/polyfills|vendor|main/],
prefetch: [/chunk/]
}),
new HtmlElementsPlugin({
publicPath: '/',
headTags: require('./head-config.common')
}),
new LoaderOptionsPlugin({}),
new ngcWebpack.NgcWebpackPlugin(ngcWebpackConfig.plugin),
new InlineManifestWebpackPlugin(),
],
node: {
global: true,
crypto: 'empty',
process: true,
module: false,
clearImmediate: false,
setImmediate: false
}
};
}wepack.prod.js
const helpers = require('./helpers');
const buildUtils = require('./build-utils');
/**
* Used to merge webpack configs
*/
const webpackMerge = require('webpack-merge');
/**
* The settings that are common to prod and dev
*/
const commonConfig = require('./webpack.common.js');
/**
* Webpack Plugins
*/
const SourceMapDevToolPlugin = require('webpack/lib/SourceMapDevToolPlugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HashedModuleIdsPlugin = require('webpack/lib/HashedModuleIdsPlugin')
const PurifyPlugin = require('@angular-devkit/build-optimizer').PurifyPlugin;
const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
function getUglifyOptions (supportES2015) {
const uglifyCompressOptions = {
pure_getters: true, /* buildOptimizer */
// PURE comments work best with 3 passes.
// See https://github.com/webpack/webpack/issues/2899#issuecomment-317425926.
passes: 3 /* buildOptimizer */
};
return {
ecma: supportES2015 ? 6 : 5,
warnings: false, // TODO verbose based on option?
ie8: false,
mangle: true,
compress: uglifyCompressOptions,
output: {
ascii_only: true,
comments: false
}
};
}
module.exports = function (env) {
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
const supportES2015 = buildUtils.supportES2015(buildUtils.DEFAULT_METADATA.tsConfigPath);
const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, {
host: process.env.HOST || 'localhost',
port: process.env.PORT || 8080,
ENV: ENV,
HMR: false
});
METADATA.envFileSuffix = METADATA.E2E ? 'e2e.prod' : 'prod';
return webpackMerge(commonConfig({ env: ENV, metadata: METADATA }), {
output: {
path: helpers.root('dist'),
filename: '[name].[chunkhash].bundle.js',
sourceMapFilename: '[file].map',
chunkFilename: '[name].[chunkhash].chunk.js'
},
module: {
rules: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
}),
include: [helpers.root('src', 'styles')]
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!sass-loader'
}),
include: [helpers.root('src', 'styles')]
},
]
},
plugins: [
new SourceMapDevToolPlugin({
filename: '[file].map[query]',
moduleFilenameTemplate: '[resource-path]',
fallbackModuleFilenameTemplate: '[resource-path]?[hash]',
sourceRoot: 'webpack:///'
}),
new ExtractTextPlugin('[name].[contenthash].css'),
new PurifyPlugin(), /* buildOptimizer */
new HashedModuleIdsPlugin(),
new ModuleConcatenationPlugin(),
new UglifyJsPlugin({
sourceMap: true,
uglifyOptions: getUglifyOptions(supportES2015)
}),
],
node: {
global: true,
crypto: 'empty',
process: false,
module: false,
clearImmediate: false,
setImmediate: false
}
});
}s
main.browser.js
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from 'environments/environment';
//import '../node_modules/font-awesome/css/font-awesome.min.css';
//import '../node_modules/primeng/resources/themes/omega/theme.scss';
//import '../node_modules/primeng/resources/primeng.min.css';
import './styles/styles.scss'
import { AppModule } from './app';
export function main(): Promise<any> {
return platformBrowserDynamic()
.bootstrapModule(AppModule)
.then(environment.decorateModuleRef)
.catch((err) => console.error(err));
}
switch (document.readyState) {
case 'loading':
document.addEventListener('DOMContentLoaded', _domReadyHandler, false);
break;
case 'interactive':
case 'complete':
default:
main();
}
function _domReadyHandler() {
document.removeEventListener('DOMContentLoaded', _domReadyHandler, false);
main();
}polyfills.js
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/weak-map';
import 'core-js/es6/set';
import 'classlist.js'; // Run `npm install --save classlist.js`.
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
import 'zone.js/dist/zone';
if ('production' === ENV) {
// Production
} else {
// Development
}
