前言
书接上文,在之前章节作者已经完成完成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-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-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/ 可以看到下图效果
终端控制台
打包后的 index.js 从 127k 降低到 1k 一下;当然这是因为作者在react中代码比较简单,实际开发过程中打包后文件肯定不止这些;这里只是演示如何排除一些通过script标签引入的依赖包。
不只是 react 和 react-dom ;还有 react-redux 、bizCharts 等这些包