CODEWITHSUNDEEP
javascriptnode.jsangularwebpack
Hitesh Balar
Hitesh Balar

Reputation: 181

Angular2 + Webpack : how to optimise vendor bundle

I have an MEAN application client side is in anular2 build webpack.

When I serve index.html from server for initial request it takes loading time 5 or 6 even more seconds when application in production, because of vendor modules JS file is more than 3MB.

How I can optimise this thing I want to separate vendor's JS file. Following is my webpack.config.js

const webpack = require('webpack');
const production = process.env.NODE_ENV === "production";
const autoprefixer = require('autoprefixer');
const path = require("path");

const config = {

  entry: {
    'app': './client/app.ts',
    'vendor': './client/vendor.ts'   },

  debug: !production,

  devtool: production ? null : "source-map",

  output: {
    path: "./dist",
    filename: "bundle.js"   },

  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js')   ],

  resolve: {
    extensions: ['', '.ts']   },

  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader' },
      { test: /\.html$/, loader: 'raw'},
      { test: /\.scss$/, include: [ path.resolve(__dirname, 'client/app/components') ], loader: 'style!css!postcss!sass' }
    ],
    noParse: [ path.join(__dirname, 'node_modules', 'angular2', 'bundles') ]   },   postcss: [ autoprefixer ] };

module.exports = config;

The following is my vendor.ts file

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');

import 'ts-helpers';

import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

import 'socket.io-client';

// RxJS
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';

import './assets/vendor/bootstrap';
import './assets/vendor/fontawesome.scss';

Building project I can get bundle.js and bundle.map.js contains my application js vendor.bundle.js and vendor.bundle.map.js will contain other third party js

I want to compile this vendor.js each library separately as well as all scss should be compiled in separate style.css in ditribution.

Thank you all.

Upvotes: 0

Views: 2612

Answers (1)

Wojciech Kwiatek
Wojciech Kwiatek

Reputation: 6802

I can see some areas to improve:

  1. I can't see any minification plugin in your code so it will give you a huge boost. See UglifyJsPlugin

  2. You added directly all the angular modules (even they may not be needed):

    import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

    It's better to just import specific things when needed like:

    import {Component} from '@angular/core';

  3. Having imports divided like above you'll be able to get the benefits of upcoming Webpack 2. The most important part is:

The static nature of ES6 Modules allows some new kind of optimizations. In example in many cases it's possible to detect which exports are used and which aren't used.

In cases in which webpack can say for sure that an export isn't used it omits the statement which exposes the export to other modules. Later the minimizer may flag the declaration as unused and omits it.

I think all of this together can make your production app much thinner without splitting libraries.

Upvotes: 1

Related Questions