Webpack series learning (V) performance optimization (II)

Production environment performance optimization

1、 Optimize package build speed

1.1. Oneof (explained in the previous chapter)

1.2. Babel cache (explained in the previous chapter)

1.3 multi process packaging

Download cnpm I thread loader - D
For Babel loader
Configure in webpack.config.js

{
  test: /\.js$/,
  exclude: /node_modules/,    
  use: [
      //Start multi process packaging. The process starts for about 600 milliseconds, and the process communication also has overhead
      //All processes need to be packaged only when the work takes a long time
      // 'thread-loader',
      {
          loader: 'thread-loader',
          options:{
              Worker: 2 // 2 processes
          }
      },
      {
          loader: 'babel-loader',
          options: {
              presets: [
                  [
                      '@ Babel / preset env', // basically compatible
                      {
                          //Load on demand
                          useBuiltIns: 'usage',
                          corejs: {
                              version: 3
                          },
                          //Specifies which version of the browser is compatible
                          targets: {
                              chrome: '60',
                              firefox: '60',
                              ie: '9',
                              safari: '10',
                              edge: '17'
                          }
                      }
                  ]

              ],
              //Enable the Babel cache, and the previous cache will be read during the second build
              cacheDirectory: true
          }  
      }
  ],
  //      
},

2、 Optimize the performance of your code

2.1. Hash chunk cache (explained in the previous chapter)

2.2. Tree shaking (explained in the previous chapter)

2.3 code split (explained in the previous chapter)

2.4 lazy loading and preloading

The first is lazy loading, that is, some JS files are not loaded when they are not triggered, and then loaded when we trigger.
Preloading can be loaded secretly after the browser is idle
Write a button button in HTML and bind DOM in the entry JS file

document.getElementById('btn').onclick = function () {
  //Lazy loading
  //Preload prefetch
  //Normal loading is to load multiple files in parallel. Preloading can be loaded secretly after the browser is idle, but the compatibility is not good
  import(/* webpackChunkName: 'test', webpackPrefetch: true*/'./test')
  .then((add) => {
    //File loaded successfully
    // eslint-disable-next-line
    console.log(add(2, 5));
  });
}

2.5、PWAProgressive web development applications

Function: like app, web pages can be accessed offline
Steps:
Install workbox:cnpm i workbox-webpack-plugin -D
Configure in webpack.config.js
const workboxWebpackPlugin = require('workbox-webpack-plugin');

new workboxWebpackPlugin.GenerateSW({
   //1. Help serviceworker start quickly
   //2. Delete the old servciewalker
   //Generate a serviceworker configuration file
   clientsClaim:true,
   skipWaiting: true
})

Register serviceworker in the entry JS file

//Register serviceworker
//Handling compatibility issues
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(() => {
        // eslint-disable-next-line
        Console.log ('sw registration succeeded ');
      })
      .catch(() => {
        // eslint-disable-next-line
        Console.log ('registration failed ');
      });
  });
}

1. Eslint doesn’t know the window and navigator global variables. Solve the problem and modify the eslintconfig configuration in package.js
   “env”: {
   “Browser“: true / / browser side global variables are supported
   }
   2. SW code must run on the server
   cnpm i serve -g
   Serve – s build starts the server and exposes all resources in the build directory as static resources

2.6、externals

Ignore unwanted packages, such as jQuery. We just want to introduce CDN

Webpack.config.js add    
externals: {
   //Ignore library name -- NPM package name
   jquery: 'jQuery'
}

Remember to introduce jQuery in HTM

2.7 DLL Dynamic Link Library

You can package third-party libraries at one time, and you cannot package them again later
Create a new webpack.dll.js file

/**
*Using DLL technology, some libraries (third-party libraries, jQuery, react, Vue) are packaged separately
*When running webpack, the default file to find is the webpack.config.js file, so
*You need to run the webpack.dll.js file,
*So modify the command -- > webpack -- config webpack.dll.js
*/

const {resolve} = require('path');
const webpack = require('webpack');
module.exports = {
   entry: {
       //[name] -- > jQuery generated by final packaging
       //['jquery '] -- > the library to be packaged is jQuery
       jquery: ['jquery']
   },
   output: {
       filename: '[name].js',
       path: resolve(__dirname, 'dll'),
       library: '[name]_ [hash] '// what is the name of the exposed content in the packaged library
   },
   plugins: [
       //Package and generate a manifest. JSON file to provide a jQuery mapping
       new webpack.DllPlugin({
           name: '[name]_ [hash] ', // the exposed content name of the mapping Library
           Path: Resolve (_dirname, 'DLL / manifest. JSON') // output file path
       })
   ],
   mode: 'production'
};

Run commandwebpack --config webpack.dll.js
Generated DLL folder
Modify webpack.config.js
const webpack = require('webpack');

//Tell webpack which libraries do not participate in packaging, and the name of the libraries used will change
new webpack.DllReferencePlugin({
   manifest: resolve(__dirname, 'dll/manifest.json')
}),

JQuery is imported into the entry JS file. After packaging, jQuery will not be packaged into the build.js file at this time
If you want to introduce jquery
install
cnpm i add-asset-html-webpack-plugin -DModify webpack.config.js
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

//Package a file and automatically import the resource into HTML
new AddAssetHtmlWebpackPlugin({
    filepath: resolve(__dirname, 'dll/jquery.js')
})