Answer a Question
Sign In

Bundle Javascript Application, Libraries And All Dependencies

Wednesday, February 19, 2020

In an effort to reduce network requests web applications should bundle JavaScript, and the necessary libraries and dependencies. Network requests should be considered expensive operations, and as such, avoiding network requests can increase the performance of our applications.

Why?

What you may not be aware of is that a network request is made for each external JavaScript that you require using a

Instructions

  • Do:

    use bundling tools like webpack and rollup to bundle JavaScript into smaller chunks

  • Consider:

    splitting large bundles into smaller chunks

  • Consider:

    lazy loading chunks that are not necessary for displaying the current route of the application

  • Consider:

    prefetching lazy loaded chunks

  • Why:

    network requests are expensive and as a result avoiding multiple requests can decrease the time-to-interactivity (TTI) of web applications

Do

Sample webpack.config.js file for bundling TypeScript

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
Brian Love
Brian is a software engineer and Google Developer Expert in Web Technologies and Angular with a passion for learning, writing, speaking, teaching and mentoring. He regularly speaks at conferences and meetups around the country, and co-authored "Why Angular for the Enterprise" for O'Reilly. When not coding, Brian enjoys skiing, hiking, and being in the outdoors. Brian recently launched lookout.dev where you can find best practices and expert advice on topics ranging from TypeScript, Angular, React, Node.js and more.
Google Developers Expert

Whoa 🤚 You need to sign in to join the discussion.

Don't worry, if you start a comment, we'll save it for when you return. 😉