preface

React – WebPack +React

The book picks up where we left off. The author has already completed some webPack configurations, including support for React, Typescript, style introduction, and package compression

This chapter covers some other useful WebPack configurations

webpackbar

The current project can only wait for the output of the terminal console while executing NPM run build or NPM start. Ideally, the console author would like to see the progress of the WebPack execution. Therefore, the author uses webPackbar, which can display the current progress in the terminal console when executing NPM run build or NPM start

The installation

npm i webpackbar -D
Copy the code

Modify webpack.com mon. Js

  • The introduction of webpackbar
  • The plugins use WebpackBar
// other
const WebpackBar = require("webpackbar")
module.exports = {
// other
 plugins: [
   // other
    new WebpackBar(),
  ],
// other
}
Copy the code

The effect

To performnpm run buildYou can see the following image

webpack-bundle-analyzer

This is a package file analysis tool that visualizes the size of each file so you can quickly find the modules that need to be optimized when optimizing related files

The installation

npm i webpack-bundle-analyzer -D
Copy the code

Modify the webpack. Prod. Js

Since we only need to know what needs to be optimized when packaging production code, we just need to modify webpack.prod.js

// other
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin")
const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin
module.exports = merge(common, {
  mode: "production".plugins: [
   // other
    new BundleAnalyzerPlugin(),
  ],
})

Copy the code

The effect

Run the NPM run build browser http://localhost:8888/ again and you can see the following image

Note: The port number here is the same as the port number for development startup

Terminal console

Reduce production package volume

The react-dom.production.min.js file is the one that occupies the largest volume of production packages. This file is a react-dom file and is already compressed. How else can the code be reduced?

Externals

Strictly speaking, using Externals does not optimize code, but excludes some code from the output bundle. The bundle gets smaller because it excludes code, but bundle code requires these dependencies. These dependency packages need to be introduced into HTML files via script tags. Otherwise, the bundle will not run properly

Modify webpack.com mon. Js

module.exports = {
// other

 externals: {
    react: "React"."react-dom": "ReactDOM",}}Copy the code

Modify the tempate. HTML

Add two script tags, react and react-dom

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
</html>

Copy the code

The effect

Run the NPM run build browser http://localhost:8888/ again and you can see the following image

Terminal console

[Fixed] the index. Js package decreased from 127K to below 1K; Of course, this is because the author of react code is relatively simple, the actual development process of packaged files will be more than this; This is just a demonstration of how to exclude some dependency packages introduced through script tags.

Not just react and react-dom; React-redux, bizCharts, etc

reference

  • webpack-bundle-analyzer
  • Externals
  • React