Preface: the author study webpack knowledge from the foundation to the principle to write a series, in order to review. Hope to help more friends who are learning Webpack.

Webpack series learning – First experience

Webpack series learning – Basic Usage one

Webpack series learning – various loaders to use

Webpack series learning – hot update and compression

Webpack series learning – multi-page packaging

Extract page common resources

First: use htMl-webpack-externals-plugin

  • The installation
npm i html-webpack-externals-plugin -D
Copy the code
  • React extract the React – DOM and put it on the CDN
  • use
// webpack.config.js
    const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
    module.exports = {
        plugins: [new HtmlWebpackExternalsPlugin({
                externals: [{module: 'react'.entry: 'https://11.url.cn/now/lib/16.2.0/react.min.js'.global: 'React'}, {module: 'react-dom'.entry: 'https://11.url.cn/now/lib/16.2.0/react-dom.min.js'.global: 'ReactDOM',},]})]}Copy the code
  • Add react React -dom to the HTML file
< script SRC = "https://11.url.cn/now/lib/16.2.0/react.min.js" > < / script > < script SRC = "https://11.url.cn/now/lib/16.2.0/react-dom.min.js" > < / script >Copy the code
  • React and react-dom can be extracted by packaging

SplitChunksPlugin

  • Webpack4 built-in replacement for CommonsChunkPlugin
  • Chunks Parameter Description
    • Async: separation of libraries introduced asynchronously (default)
    • Initial: Synchronizes the imported libraries for separation
    • All: Separation of all imported libraries (recommended)
  • use
// webpack.config.js
    module.exports = {
         chunks: ['vendors',pageName], // Add 'vendors' to htmlWebpackPlugin
        // ...
         optimization: {
            splitChunks: {
                minSize: 0.// Public packets are processed when the minimum value is 0 bytes
                cacheGroups: {
                    commons: {
                        test: /(react|react-dom)/,
                        name:'vendors'.chunks: 'all'.minChunks: 2.// Public package must contain at least two files}}}},}Copy the code

Tree shaking

  • Tree shaking

DCE

  • Code will not be executed, not reachable
  • The results of code execution are not used
  • The code only affects dead variables (write, not read)

The tree – shaking principle

  • Use es6 module features

    • Can only appear as a statement at the top level of a module
    • The module name for import must be a string constant
    • Import binding is immitable

  • Code erasure: The Uglify phase removes useless code

  • use

    • Define a tree-shaker.js
     export function a(){
      return 'this is page a'
  }

  export function b(){
      return 'this is page b'
  }
Copy the code
    • Introduce function A in search/index.js, and use function A
    • The packaged file contains only function A, but no function B. To optimize useless code

Code splitting and dynamic import

Dynamic segmentation meaning

  • Break the code base into chunks and load them when the code runs until it needs them
  • Applicable scenarios:
    • Pull the same code into a shared block
    • The script loads lazily, making the initial download smaller

Lazy way to load JS

  • cjs:require.ensure
  • Es6: Dynamic import(Babel conversion required)

How to use dynamic import

  • Install the Babel plug-in
npm i @babel/plugin-syntax-dynamic-import -D
Copy the code
  • Add the Babel plugin to. Babelrc
{
   "plugins":["@babel/plugin-syntax-dynamic-import"]
}
Copy the code

use

  • Create text.js in search
import React from 'react';

export default() = ><div>Dynamic import</div>
Copy the code
  • Dynamically introduce text.js in search/index.js and load text.js only when the image is clicked
  • After packing, check the effect

The above code is posted on Github

Debug can be downloaded.