前言
前端领域不断发展，越来越多优秀的工具和框架呈现在我们眼前。React 作为一款流行的 Web 前端框架，可以帮助开发者快速构建出高质量的 Web 应用。在使用 React 进行开发的过程中，我们常常需要关注我们所写的代码所体积大小。而 Webpack-Bundle-Analyzer 提供了一种对于我们的应用包体积进行分析的工具。
什么是 Webpack-Bundle-Analyzer
Webpack-Bundle-Analyzer 作为一款 Webpack 插件，可以产生出一个以 interactivemap 的形式来展现打包后的各个模块的占比大小，模块之间共享的模块和重复的模块等信息。这种信息可以帮助我们进行代码优化，更好的压缩代码和去除冗余代码。
Webpack-Bundle-Analyzer 的安装和配置
首先，我们需要安装 webpack-bundle-analyzer 这个包。在终端窗口中使用下面的命令进行安装：
npm install --save-dev webpack-bundle-analyzer
安装完成后，我们需要在 webpack.config.js 文件中添加下面的配置：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin(),
],
};这样，我们就可以使用这个插件了。
如何使用
我们只需要运行我们的应用，然后在我们的 Web 浏览器中打开 http://localhost:8888 来查看我们的资源结构，其中 8888 是我们应用启动时监听的端口号。如果我们指定了不同的端口，那么我们需要在上述地址中用正确的端口号来代替 8888。下面是一个使用它的简单示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - --------------------------------------------------------
-------------- - -
------ -----------------
------- -
----- -------------------- --------
--------- -----------
--
------- -
------ -
-
----- ----------
---- --------------
-
-
--
-------- -
--- -------------------
--------- ------------------
---
--- ----------------------
-
--如果您正在使用 Create React App 这个脚手架，可以使用 react-scripts-bundle-analyzer 这个工具进行配置。
如何利用分析结果进行代码优化
在通过 Webpack-Bundle-Analyzer 得到我们的打包后的应用的分析结果之后，我们需要进行一些代码优化。为此，我们可以根据分析结果，把代码分成一些不同的块。这些块可以被单独的异步加载，这样就可以优化我们的应用的性能。下面是一个例子：
import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
console.log(_.join(['Webpack', 'Bundle', 'Analyzer'], '-'));
});这里 lodash 这个模块会被单独的打包成一个 chunk，然后异步加载进来。这样做可以更好的优化我们的应用的性能。
总结
Webpack-Bundle-Analyzer 作为一款 Webpack 插件，可以帮助我们分析我们打包出来的应用包的大小及代码结构，便于我们进行代码优化。通过分离出一些不同的代码块可以进行异步加载从而更好地优化我们的应用的性能。实际上，Webpack-Bundle-Analyzer 还有很多其他的配置和使用方法，可以依据实际需求进行设置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae7d6448841e9894a9016f