At our previous job, we used WebPCK to build all the time. However, after four years of update iteration, everyone did different operations and updates in the same project, which led to an astonishing one and a half minutes of production build time and 14 seconds of watch mode rebuild.

This causes you to wait as long as 14 seconds every time you save your code.

A few tricks can be to drop the build time from a minute and a half to 20 seconds and rebuild to about 1 second.

smp

Before that, we need to have a quantitative indicator to prove that what we do is meaningful. This is where the speed-measure-webpack-plugin comes in handy. It can measure the usage time of various plug-ins and loaders and quantify metrics.

After wrapping the WebPack configuration with SMP, execute the build and get the following information:

From this we can get the optimized time and the specific time spent by each plug-in and loaders.

cache-loader

After adding the SMP, the first issue we have to deal with is the initial build time (in this case, the time it takes ebPack to build again after the first build w). Here we introduce the first loader we need: cache-loader

Cache-loader is a loader that caches the previous results to the hard disk (database), meaning that the next time webpack is executed, there will be a significant improvement.

The demo is as follows:

{
  rules: [{test: /\.jsx? $/.use: [
        'cache-loader'.'babel-loader',]}, {test: /\.scss$/.use: [
        'style-loader'.'cache-loader'.'css-loader'.'postcss-loader'.'sass-loader',],},]}Copy the code

With this addition, we were able to shave about 75 seconds off the first build time. Next, let’s deal with the rebuild time, and update devTool to get the most out of it.

webpack source maps

In the WebPack configuration, we can find a devtool configuration that, according to the documentation, allows us to:

Select a style of Source map to enhance debugger capabilities. However, this feature will affect the build and rebuild speed.

In other words, changing this configuration will result in the corresponding Source maps, and more importantly, it will affect how long you wait to get the bundle.

Using experience to configure Devtool properly, we can change the devtool value from the slowest source-map -> eval-sourcemap, which reduces the time from 14 seconds to 3.5 seconds.

{
  devtool: process.env.NODE_ENV === 'development'
    ? 'eval-source-map'
    : 'source-map'
}

Copy the code

There are many more values in the document. You can choose which one suits you best.

transpile

In addition, browsers now support most of the latest syntax and apis, and in a development environment we don’t need a perfect packaging scheme like this:

module.exports = {
  presets: [['@babel/preset-env',
      {
        targets: [
          'last 1 chrome version'.'last 1 safari version'.'last 1 firefox version',
        ].join(', '),},]],// ...
}
Copy the code

These three simple tips can significantly reduce build time and improve the development experience.

The original link