1. Optimize the search scope of the Loader

  1. test:

Matches specific conditions. Typically, a regular expression or array of regular expressions is provided, but this is not mandatory

  1. Include (recommended) :

Matches specific conditions. Usually a string or array of strings is supplied, but this is not mandatory

  1. Exclude (** has the highest priority): **

Rule out certain conditions. Typically, a string or array of strings is supplied, but this is not mandatory

{
  test: /\.css$/,
  include: [
    path.resolve(__dirname, "app/styles"),
    path.resolve(__dirname, "vendor/styles")]}Copy the code
Optimization scheme

Reduce the lookup time by narrowing the module’s lookup scope

2. Optimize the search scope of third-party modules

  1. resolve.modules

The directory to search for when parsing a module

module.exports={
  resolve:{
  	modules: [path.resolve(__dirname, "./node_modules")]}}Copy the code
Optimization scheme

Mask the increased elapsed time of calling the module up by specifying the search directory for the parse module

3. Optimize the time required to import multiple modules

  1. resolve.alias

Configuring aliases to ensure module introduction is made easier

resolve: {
   alias: {
     "@": path.join(__dirname, "./pages"),
     "@assets": path.resolve(__dirname, ".. /src/images/"),}},Copy the code
Optimization scheme:

Importing modules using aliases that specify directories/files reduces recursive parsing time for modules

4. Optimize the import module without specifying the time of suffix increase

resolve.extensions

This configuration searches for suffixes based on configuration items when the imported module does not carry suffixes

// V1 hwVersion default value
extensions: [".js".".json"]
Copy the code
Optimization scheme
  1. Use a reasonable list of suffixes
  2. Specify the suffix when importing modules

5. Use multi-threaded threadloader

Configure the time-consuming Loader to run in the thread pool

The installationthread-loader:
npm install --save-dev thread-loader
Copy the code
Usage:

If you place this loader before other loaders, loaders placed after this loader will run in a separate worker pool

Example:
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve("src"),
        use: [
          "thread-loader"."expensive-loader"}]}}Copy the code

6. Optimize babel-loader with cache

Babel-loader provides cacheDirectory configuration for the directory given when Babel is compiled and will be used for the cache loader’s consequences, but this setting defaults to false and we need to set it to true. This way babel-loader will use the default cache directory.

The installationbabel-loader:

webpack 3.x | babel-loader 8.x | babel 7.x

npm install babel-loader@8.0. 0-beta. 0 @babel/core @babel/preset-env webpack
Copy the code

webpack 3.x babel-loader 7.x | babel 6.x

npm install babel-loader babel-core babel-preset-env webpack
Copy the code
Example:
rules: [
  {
    test: /\.js$/,
    loader: 'babel-loader',
    options: {
    	cacheDirectory: true}}];Copy the code

7. Enable multi-threading and caching using terser-webpack-plugin

The installationterser-webpack-plugin:
npm install terser-webpack-plugin --save-dev
Copy the code
Example:
const TerserPlugin = require('terser-webpack-plugin');
  module.exports = {
    optimization: {
      minimizer: [
        new TerserPlugin({
        cache: true.// Enable caching
        parallel: true / / multi-threaded}}})];Copy the code

8. Reduce dependencies by using externals > prevent certain imported packages from being packaged into bundles and instead obtain these dependencies externally at run time

For example, import jQuery from CDN instead of packaging it: index.html

<script
  src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous">
</script>
Copy the code

webpack.config.js

externals: {
  jquery: 'jQuery'
}
Copy the code

Dependency use invariant

import $ from 'jquery'; $('.my-element').animate(...) ;Copy the code