Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Hello, I’m Shanyue.

This is my front end engineering knowledge card collection 9/36 published in Denver

The speed-measure-webpack-plugin command is used to estimate the execution time of each loader/plugin.

Persistent cache: cache

Webpack5 has a built-in plug-in for caching, which can be enabled through the following configuration. It serializes Module, Chunk, ModuleChunk and other information to disk. The second construction avoids repeated compilation calculation, and the compilation speed is greatly improved.

{
  cache: {
    type: 'filesystem'}}Copy the code

If a JS file is configured with esLint, typescript, or Babel loader, it may compile five times and be parsed as an AST five times

  1. acorn: used for dependency analysisacornThe AST
  2. eslint-parser: used with lint, resolved toespreeThe AST
  3. typescript: used for tstypescriptThe AST
  4. babel: Used to convert to lower version, parse to@babel/parserThe AST
  5. terser: used to compress confusion and resolve toacornThe AST

When persistent caching is enabled, the AST parsing that takes the most time is retrieved from the disk cache, and the AST parsing is not required when compiling again.

Thanks to persistent caching, secondary compilation can even provide a similar development experience to something like Unbundle’s Vite

In webpack4, cache-loader can be used to cache only loaders. Note that the loader state is @depcrated.

module.exports = {
  module: {
    rules: [{test: /\.ext$/,
        use: ['cache-loader'. loaders],include: path.resolve('src'),},],},};Copy the code

Multi-process: thread-loader

Thread-loader is an official recommended loader that enables multi-process. It can enable multi-thread processing when parsing the AST from Babel to improve compilation performance.

module.exports={
  module: {rules:[
      {
        test:/\.js$/,
        use:[
          {
            loader: 'thread-loader'.options: {
              workers: 8}},'babel-loader'}]}}Copy the code

In Webpack4, the happypack plugin can be used, but it is important to note that happypack has not been maintained for a long time.