This is the 24th day of my participation in the August Text Challenge.More challenges in August

preface

Webpack is a static module packaging tool for modern JavaScript applications. When WebPack processes an application, it internally builds a Dependency graph from one or more entry points, and then assembles each module you need in your project into one or more bundles, which are static resources for displaying your content.

Some optimized configurations

Hot update

Hot updates, where pages replace, add, or remove modules as they run without having to reload the entire page, make previews faster and wait less. The idea is to inject proxy clients into each chunk to connect to devServer and web pages.

devServer: { // ... Ignore some code hot: true,},Copy the code

Or add the –hot parameter to the command. After this function is enabled, you can modify the local code in the page to achieve hot refresh.

cache

This is a new attribute cache for Webpack 5 to cache generated Webpack modules and chunks to improve build speed.

Disk caching is enabled by default, and the compiled results are cached in the project node_modules/. Cache /webpack by default.

module.exports = {
  //...
  cache: {
     type: 'filesystem',
     allowCollectingMemory: true,
    },
};
Copy the code
Designated search area

Specify include for loader to reduce the scope of loader application and apply only the minimum number of necessary modules. When configuring the Loader, use test, exclude, and include to narrow the search scope

module: {
  rules: [
    {
      test: /.(png|svg|jpg|jpeg|gif)$/i,
      include: path.resolve(__dirname, 'src'),
      type: 'asset/resource',
    },
  ],
},
Copy the code
source-map

Webpack-packed code becomes very complex, which makes debugging very difficult. Often the interpreter will tell you that the code in the row or column is wrong, but this does nothing for the packaged code. Source Map provides a technique for code mapping after the source code is built, but can be used to locate the island source code if the project reports an error.

module.exports = {
  //...
  devtool: 'source-map',
};
Copy the code

  • The recommended configuration

    • Development environment:source-map(Generate source map for easy debugging)
    • Production environment:none(do not generatesource map)
Cache optimization

When a browser loads a page, it usually looks locally for the presence of a cache and loads the cached data directly. When we use Webpack packaging, we can load the hash value in the suffix of the file so that the browser does not load the file in the cache.

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'js/[name]/[name].[contenthash].js',
  clean: true,
},
Copy the code
The compression code

Run the following command on the terminal to install the terser-webpack-plugin

yarn add -D terser-webpack-plugin 
Copy the code

Configure the terser-webpack-plugin in the Webpack configuration file

import TerserPlugin from 'terser-webpack-plugin';
Copy the code
optimization: { minimize: true, minimizer: [ new TerserPlugin({ test: /.js(?.*)?$/i, parallel: true, terserOptions: {toplevel: true, // Delete useless code},}),],},Copy the code

Install the mini-CSs-extract-plugin css-minimizer-webpack-plugin by executing the following command on the terminal

yarn add -D mini-css-extract-plugin css-minimizer-webpack-plugin 
Copy the code

Configure the mini-CSS-extract-plugin css-minimizer-webpack-plugin in the Webpack configuration file

import MiniCssExtractPlugin from "mini-css-extract-plugin"
import CssMinimizerPlugin from "css-minimizer-webpack-plugin"
Copy the code
{
  test: /.css$/i,
  use: [MiniCssExtractPlugin.loader, 'style-loader', 'css-loader', 'postcss-loader'],
},
Copy the code
optimization: {
  minimize: true,
  minimizer: [
    new CssMinimizerPlugin(),
  ],
},
Copy the code
Multiple processes

Use thread-loader to enable multi-process packaging and package subsequent loaders in multiple threads.

It is important to note that each process takes 600ms to start, which is usually used in medium to large projects.

module: {
    rules: [
      {
        test: /.js$/,
        use: [
          "thread-loader",
          "babel-loader"
        ],
      },
    ],
},
Copy the code