Background:

In order to have better support from the community of webpack and a better build performance. we need to upgrade the webpack.

Things to Alert:

searching for the prerequisite work and found that its not a painless upgrade. some module are removed and some are enabled in default mode. Also got some new config.

1. New Property - Mode

webpack 4 now ship two default mode settings which can benefit for different way.

Development:

• Tooling for in browser debugging
• Fast incremental compilation for a fast development cycle
• Useful error messages at runtime

Production:

• Small output size
• Fast code at runtime
• Omitting development-only code
• Not exposing source code or file paths
• Easy to use output assets

So the webpack.config.js need to add new property. and none is added to the config. But lead to some development issue. will discuss in later session

2. CommonsChunkPlugin is completely removed

webpack 4 have remove CommonsChunkPlugin and brings a new replacement optimization.splitChunks. it helps extracting common module from multiple entries and chunks will be generated automatically.

Refer to the webpack doc. the old CommonsChunkPlugin got several problem:

• It can result in more code being downloaded than needed.
• It’s inefficient on async chunks.
• It’s difficult to use.
• The implementation is difficult to understand.

Things happened during upgrade:

As the our webpack 3 settings use CommonsChunkPlugin for runtime loading. including jquery, underscore and hammer. we need to migrate to the new optimization.splitChunks. the settings give out huge different considering in the output file.

In webpack 3, we got two entries and one chunk. which have 1xmB, xmB and xmB corresponding ly. and the chunk is only consist of the runtime component only. but got a performance problem when the big entry is loaded. it takes ~5s to downloaded the js file.

In webpack 4, benefited from the new optimization.splitChunks. common modules are extracted to chunk including the node module like react, react-dom. The total size of entries suppressed to several kb. Although the chunk is now 1xmB and the loading time is transferred to the first load. but the overall user experience is improved. main app is load immediately without and observable loading time.

During the migration. one issue was found, after upgrade and start the webpack watch mode. the incremental build seems fail and it fire a completely rebuild each time. which destroy the development experience, but after some digging about the new introduced property, mode need to be set as development. Otherwise the cache function will be disable and the incremental build feature will completely useless.

Things to improve:

1. Split development and production webpack.config.js:

some heavy load plugin may need to disable in development mode like terser plugin.

2. Remove unused plugin and module:

some old plugin may no longer in needed, like juery, underscore and hammerjs. the overall build speed of the webpack is still slow and did't get improved from the new version. may need to check the architecture of the app to see if it can imporved.

To be Continued...