webpack meet up notes

webpacktalk.md

Talk was in general was quick walkthrough of cool features of Webpack 2. Mentioning some of the stuff not used in our code and very cool guidelines for improving production code in terms of output, assembly, assets, css etc. In summary, we might need an expert on Webpack2 to review for us later to apply best possible techniques.

• The content was based on the book authored by Juho Vepsäläinen (https://github.com/bebraw) who is the core team member of Webpack and main driver behind @SurviveJS effort.
• All the things he talked are explained in detail on https://survivejs.com/webpack/introduction/

Cool plugins mentioned

• webpack-merge: Cool plugin for merging and selecting configuration specially for production & development mode config files.
• purify-css/ purify-css-webpack / uncss: To removed unused CSS in the output code.
• stylelint/csslint : To applying linting rules on CSS files similarly to our code.
• AggressiveSplittingPlugin/http2-aggressive-splitting : Cool plugin to take advantages of http2 protocol for chunking and splitting.
• CommonChunksPlugin : For splitting code for various cases.
  • Route based chunking.
  • Bundling vendor and app libraries separately.
  • Bundling vendor splits into various submodules based on page by page.

General notes

• enforce: with values pre or post can decide the order of applying loards and plugins.
• can use import !url-loader/file.ss for inline imports in CSS files.
• oneof config section in the code to apply or differentiate between internal or external modules or defining fallback modules.
• issuer : Instead of test condition can be used to apply the root entry file for tracing the imports.
• Notes on loaders: All loaders work from Right to Left so that it is easy to take in account of the effect.
• It is possible to specifically define browsers versions output to produce for CSS.

Optimizing Image loading

• Important to decide if Inlining is required or not. (Default behavior is to Inline images). Key Consierations are :
  • HTTP1.1 vs HTTP2 (HTTP2 relaxes number of resources loaded from same host URL hence more performant with many small images vs more requests in HTTP1.1)
  • Size of individual images and setting size limit for inlining.
  • Using sprites using special loaders for defining sprite sources & sprite maps.
  • Special HTTP2 webpack plugins for the purpose.

Performance enhancement techniques for production:

• Always split app/vendor bundler separately. CommonChunksPlugin helps to do it much better with simple trick of function.

new webpack.optimize.CommonsChunkPlugin({
  name: "vendor",
  minChunks: function (module) {
    // this assumes your vendor imports exist in the node_modules directory
    return module.context && module.context.indexOf("node_modules") !== -1;
  }
})

• Must minify/uglify JS using plugins such as minify/uglify.

• Minify CSS using cleancss / cssnano.

• Minify HTML using posthtml

• Treeshaking so that only used functions/imports are exported.

• For efficient cache busting must using chunkhash for the build output, which also produces a manifest.json file.

• Can split also manifest.json file separate for vendor and app using again CommonChunks plugin

• Webpack defaults module to module ids such 0,1,2. Can use NamedModulePlugin at development time to speed development and retaining module names. On the other side can use HashedModulePlugin to produce hashed output of vendor libraries and files.

• Can user records plugin to track module IDs across builds so that it is easier to debug and keep track of modules. Produces records.json containing mapping to module name to module ID.

• Always visualize webpack output to figure out what to optimize. various tools such as https://chrisbateman.github.io/webpack-visualizer/

• Performance enhancement for the compile build time during development:

• parallel-webpack/happy-webpack or happypack: To take benefits of multicore CPUs on develpoment machine to compile code faster.

• Use No source maps or optimized sources maps or targetted source maps only while development.

• Can Skip polyfills during development phase.

• Use DLL (Dynamically Linked Libraries) by pre-building the modules/libraries not changing so that only changed code or actively worked upon code is build again and again.

• Webpack is not only for web but also can produce code for webworkers, node, node-async and node-webkit used in desktop apps using electron or chromium.

• Should follow Progressive Web application shell approach to have mutliple HTML pages for each section of the application and building only specific libraries/bundles for the pages using code splitting techniques using CommonChunksPlugin and html-webpack-plugin.

• Consider using server side rendering if required. (However it increase complexity in managing the application so should be done as last resort with lot of consideration.)

• Use import-loader and expose-loader and ignore...... plugins for efficient linking of libraries/modules and linking them together.