webpack optimization

Generally, we talk about webpack optimization, into nothing more than packing time and packing volume optimization.

Packing time

　　Optimized Packaging time, we can think of strategy: to reduce the need to read and parse the document  and  improve packaging performance .

　　Reducing the need to read and parse the file

　　　　1. Optimize loader

　　　　　　To babel-loader, for example, if you can, we try to include exclude the specified range

　　　　　　If you like babel-loader as there are parameters for caching, it also can be used

module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader?cacheDirectory=true',
        include: [resolve('src')],
        exclude: /node_modules/
      }
    ]
}

　　　　2. playing Dll

　　　　　　Some changes infrequently code (typically third-party libraries), in advance labeled as a dll, then packaged in a project when you do not need every repack this part of the code.

　　　　　　dll's webpack configuration:

// disposed in a separate file 
// webpack.dll.conf.js 
const = path the require ( 'path' ) 
const WebPACK = the require ( 'WebPACK' ) 
module.exports = { 
  entry: { 
    // want unified package classes library 
    Vendor: [ 'REACT', 'jQuery' ] 
  }, 
  Output: { 
    path: path.join (__ dirname, 'dist' ), 
    filename: '[name] .dll.js' , 
    library: ' [name] - [ the hash] ' 
  }, 
  plugins: [ 
    new new webpack.DllPlugin ({
       // name must be the same and output.library 
      name:' [name] - [the hash] ',
      // This attribute needs DllReferencePlugin consistent 
      context: __dirname, 
      path: path.join (__ dirname, 'dist', '[name] -manifest.json' ) 
    }) 
  ] 
}

 　　　　　The project webpack configuration:

// webpack.conf.js 
module.exports = {
   // ... Other configurations will be omitted 
  plugins: [
     new new webpack.DllReferencePlugin ({ 
      context: __dirname, 
      // the manifest is packed out before json file 
      manifest: require ( './ dist / Vendor-the manifest.json ' ), 
    }) 
  ] 
}

 　　Improve packaging performance

　　　　1. HappyPack

　　　　　　Breakthrough single-threaded, multi-threaded resolution.

Module1: { 
  loaders to: [ 
    { 
      Test: /\.js$/ , 
      the include: [Resolve ( 'the src' )], 
      the exclude: / the node_modules / ,
       // content-id corresponding to the following behind 
      loader:? 'happypack / loader id = happybabel ' 
    } 
  ] 
}, 
plugins: [ 
  new new HappyPack ({ 
    ID: ' happybabel ' , 
    loaders to: [ '? cacheDirectory Babel-Loader ' ],
     // open the four threads 
    threads:. 4 
  }) 
]

 　　　　2. webpack-parallel-uglify-plugin

　　　　　　We usually use  UglifyJS to compress code, we may wish to use webpack-parallel-uglify-plugin instead, let it break through the single-threaded, multi-process compression code.

 　　　　　   Fortunately, webpack in the official version 4.x, the default has helped us achieve. We do not need to use this plug-in. As long as the mode is set to production on it.

Some small optimization points

We can also accelerate the speed of packaged by some small optimization points

• resolve.extensions: To indicate the file suffix list, the default order is to find  ['.js', '.json'], if you import a file does not add the suffix will find the file in that order. We should reduce the length of the list as a suffix, then the high frequency suffix top surface will appear
• resolve.alias: You can map a path through the alias of the way, let Webpack find a faster path
• module.noParse: If you are sure that no other dependencies next file, you can use this property to make Webpack not scan the file, this way is helpful for large libraries

Package volume

　　Optimized Packaging volume, we can think of strategies: compressed code (mentioned above UglifyJS) , split file , merge modules , reducing the need to come packaged files .

 　  Split File - loaded on demand

　 　　 With the import es6 () to achieve dynamic load demand, webpack this part will split out a separate file

import a from './a.js';
if (xxx) {
    a();
}

/***************** 替换成 **********************/ 

// import a from './a.js';
if (xxx) {
    import(/*webpackChunkName: "haha233"*/'./a.js')
        .then(mod => {
             mod(); 
        }) 
}

 　　Merge Modules - Scope Hoisting

 　　　  Scope Hoisting analyzes the dependencies between modules, as much as possible out of the package module to merge into a function.

　　　　Just set optimization. concatenateModules Is true, it can open.

　　　　Fortunately, it will automatically turn on webpack 4.x production mode.

　　Reduction package comes in a file - Tree Shaking

　　　　Tree Shaking can help us not used to delete the code, for example:

// test.js
export const a = 1
export const b = 2
// index.js
import { a } from './test.js'

　　　　Fortunately, it will automatically turn on webpack 4.x production mode.