使用 webpack-bundle-analyzer 分析 webpack 代码库拆分块

Posted heroljy

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用 webpack-bundle-analyzer 分析 webpack 代码库拆分块相关的知识，希望对你有一定的参考价值。

github：https://github.com/webpack-contrib/webpack-bundle-analyzer

1.安装：

　　cnpm install webpack-bundle-analyzer --save-dev

2.在 vue.config.js 中：

　　const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
　　module.exports = {
　　　　configureWebpack: {
　　　　　　plugins: [new BundleAnalyzerPlugin()]
　　　　}
　　}

 

3.执行 npm run serve 或者 npm run build 指令，会自动打开浏览器，显示对应开发环境或压缩环境的分析图

以上是关于使用 webpack-bundle-analyzer 分析 webpack 代码库拆分块的主要内容，如果未能解决你的问题，请参考以下文章