前言

从零搭一个极简版webpack+React工程（四）

书接上文，在之前章节作者现已完成完成webpack的一些装备，包含支持react、Typescript、样式引进、打包代码压缩

本章讲述一些其他好用的webpack装备

webpackbar

当时工程在履行npm run build 或许 npm start 时只能默默的等候终端控制台输出，抱负的控制台作者期望能够看到webpack履行进度。所以这儿作者运用了webpackbar这个插件，能够在履行npm run build 或许 npm start 时让终端控制台显现当时进度

装置

npm i webpackbar -D

修正 webpack.common.js

  • 引进webpackbar
  • plugins 运用 WebpackBar
// other
const WebpackBar = require("webpackbar")
module.exports = {
// other
 plugins: [
   // other
    new WebpackBar(),
  ],
// other
}

作用

从头履行 npm run build能够看到下图作用

从零搭一个极简版webpack+React工程（五）

webpack-bundle-analyzer

这是一个打包文件剖析东西，让每个文件巨细可视化，这样就能够在优化相关文件时快速找到需要优化的模块

装置

npm i webpack-bundle-analyzer -D

修正 webpack.prod.js

由于只要打包出产代码时才需要知道哪些需要优化，所以我们只需要修正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(),
  ],
})

作用

从头履行 npm run build浏览器 http://localhost:8888/ 能够看到下图作用

注意：这儿的端口号和开发发动的端口号一致

从零搭一个极简版webpack+React工程（五）

终端控制台

从零搭一个极简版webpack+React工程（五）

减小出产包体积

经过 webpack-bundle-analyzer 这个插件能够看到，当时出产包占用体积最大的事react-dom.production.min.js这个文件；这个文件是react-dom文件且现已压缩过了，代码还能如何减小呢？

Externals

严格来说运用 Externals 并不是优化代码，而是将一些代码从输出的 bundle 中扫除。由于 bundle 将代码扫除，所以bundle体积会变小，可是bundle代码时需要这些依靠的。这些依靠包需要经过 script 标签的局势引进到 html 文件中。否则 bundle 将不能正常运转

修正 webpack.common.js

module.exports = {
// other
 externals: {
    react: "React",
    "react-dom": "ReactDOM",
  },
}

修正 tempate.html

新增两个script标签，引进 react和react-dom

<!DOCTYPE html>
<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>

作用

从头履行 npm run build浏览器 http://localhost:8888/ 能够看到下图作用

从零搭一个极简版webpack+React工程（五）

终端控制台

从零搭一个极简版webpack+React工程（五）

打包后的 index.js 从 127k 降低到 1k 一下;当然这是由于作者在react中代码比较简单，实际开发过程中打包后文件必定不止这些；这儿仅仅演示如何扫除一些经过script标签引进的依靠包。

不仅仅 react 和 react-dom ；还有 react-redux 、bizCharts 等这些包

参考文献