- 综合排序
- 最热优先
- 最新优先
- 来自专栏Article
webpack-bundle-analyzer 核心实现解析
webpack-bundle-analyzer webpack-bundle-analyzer 是一个插件：通过分析构建产物，最终生成 矩形树图 方便开发者根据项目构建后的依赖关系以及实际的文件尺寸， 因为纵观当前的几类依赖分析的插件，包括 webpack 自身提供的一个工具 http://webpack.github.io/analyse/ 从可视化的角度来说，都没有 webpack-bundle-analyzer 而 webpack-bundle-analyzer 和他们之间的区别在于借助 acorn ，通过分析构建产物来得出模块依赖关系，核心实现上其实是脱离了 webpack 的能力，但由于是分析 webpack // 兼容 webpack 新老版本的写法 if (compiler.hooks) { compiler.hooks.done.tapAsync('webpack-bundle-analyzer ', done); } else { compiler.plugin('done', done); } } } webpack-bundle-analyzer
4.2K50编辑于 2022-06-15 - 来自专栏Hello world
vue(typescript) 使用webpack-bundle-analyzer
1.安装 npm intall webpack-bundle-analyzer 2.vue.config.js中配置 chainWebpack: config => { if(process.env.NODE_ENV production'){ if(process.env.npm_config_report){ config.plugin('webpack-bundle-analyzer ') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
1K40发布于 2020-08-28 - 来自专栏除除的专栏
使用 webpack-bundle-analyzer 分析与优化构建体积
使用 webpack-bundle-analyzer 可可视化分析构建产物并生成 stats.json，帮助定位体积来源。 安装npm i -D webpack-bundle-analyzer配置示例webpack.analyzer.jsconst { merge } = require('webpack-merge');const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');const common = require('.
18410编辑于 2025-12-02 webpack——通过webpack-bundle-analyzer分析项目包占比情况
前言 npm: webpack-bundle-analyzer github:webpack-bundle-analyzer 内容 安装 npm i -D webpack-bundle-analyzer 配置 主要涉及两个文件webpack.config.js和package.json webpack.config.js const BundleAnalyzerPlugin = require('webpack-bundle-analyzer }), ], } package.json { "scripts": { "analyz": "webpack --profile --json > stats.json && webpack-bundle-analyzer
27510编辑于 2024-08-16- 来自专栏李维亮的博客
webpack的可视化资源分析工具webpack-bundle-analyzer的使用（转载）
以下给出webpack-bundle-analyzer配置【vue-cli构建项目时会自动配置好】 安装webpack-bundle-analyzer 控制台输入npm/cnpm install --save-dev webpack-bundle-analyzer config/index.js文件中 module.exports = { build: { ... // Run the build webpack.prod.conf.js文件中 ... if (config.build.bundleAnalyzerReport) { var BundleAnalyzerPlugin = require('webpack-bundle-analyzer 开始使用webpack-bundle-analyzer 控制台输入npm run build --report 等待构建完成后，在浏览器中输入localhost:8888打开分析结果，就可以开始分析啦。
3.6K20发布于 2021-07-09 - 来自专栏Web技术学苑
介绍几个不太常用的打包分析工具
webpack官方提供了分析打包的一些工具，我们在开发打包后，我们可以利用webpack给我们提供的一些工具去分析包的大小，从而对打包输出文件进行优化，通常我们都会用webpack-bundle-analyzer webpack-chart: webpack stats 交互饼图，主要是利用命令行webpack --profile --json=stats.json 本地生成json,然后根据生成的json显示包的信息 webpack-bundle-analyzer 直接安装webpack-bundle-analyzer[4]插件 npm i webpack-bundle-analyzer --save-dev // webpack.config.js const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') ... module.exports = { plugins: [ ： https://github.com/webpack-contrib/webpack-bundle-analyzer [5]helper： https://webpack.jakoblind.no/
85010编辑于 2022-07-28 - 来自专栏全栈修仙之路
Angular 工具篇之分析包的大小
本文将介绍如何使用 webpack-bundle-analyzer 和 source-map-explorer 这两款工具来分析 Angular Bundle 的大小。 webpack-bundle-analyzer Webpack Bundle Analyzer 这个工具为我们提供了交互性的 treemap 来可视化显示 webpack 打包输出文件的大小。 因为 angular6-example-app 项目已经默认安装了 webpack-bundle-analyzer 这个库，所以我们不需要再次安装该库，对于其它的项目来说的话，你可以在项目目录下执行下面的命令来执行安装操作 ： $ npm i webpack-bundle-analyzer --save-dev 接下来我们使用 Angular CLI 来构建项目，在构建的时候，需要添加相关参数，具体如下： $ ng build /node_modules/.bin/webpack-bundle-analyzer dist/stats.json 以上命令成功运行后，控制台会输出以下信息： Webpack Bundle Analyzer
2.8K40发布于 2019-11-05 - 来自专栏前端LeBron
[分享]Webpack打包分析工具
run stats 根目录下生成了一个stats.json json文件内容较复杂，可以将文件上传至https://webpack.github.io/analyse/ 进行分析 效果 方案二：使用webpack-bundle-analyzer 安装 npm install webpack-bundle-analyzer webpack.common.js const {BundleAnalyzerPlugin} = require("webpack-bundle-analyzer
1.3K30编辑于 2021-12-08 - 来自专栏White feathe 的博客
性能优化 - 查看 webpack 打包后所有的依赖关系（webpack 可视化工具）
查看 webpack 打包后所有组件与组件间的依赖关系，针对多余的包文件过大， 剔除首次影响加载的效率问题进行剔除修改，本次采用的是 ==webpack-bundle-analyzer（可视化视图查看器 ）== == 介绍1：webpack-bundle-analyzer（可视化）== 将捆绑内容表示为方便的交互式可缩放树形图 如下效果图： 模块功能： 意识到你的文件打包压缩后中真正的内容 找出哪些模块组成最大的大小 安装和使用 npm install --save-dev webpack-bundle-analyzer 在webpack.config.js中： let BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [new BundleAnalyzerPlugin 参考资料：https://www.npmjs.com/package/webpack-bundle-analyzer ---- == 介绍2：webpack官网提供的工具== webpack提供的一个官方工具
4K30编辑于 2022-04-13 - 来自专栏Vue开发社区
vue.config.js的优化配置（element-ui, echarts, lodash按需加载 ）
BundleAnalyzer 作用：展示打包图形化信息，会打开一个html页面，帮助自己分析哪些文件过大，可针对其进行优化，上线前 注释掉 安装 webpack-bundle-analyzer 插件 npm install webpack-bundle-analyzer --save-dev 在 vue.config.js: 里面： // 引入 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 展示图形化信息 chainWebpack: config => { config .plugin('webpack-bundle-analyzer') .use(BundleAnalyzerPlugin) } 抽离 css 支持按需加载 安装 mini-css-extract-plugin ') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) if (process.env.NODE_ENV
1.8K20编辑于 2022-03-29 - 来自专栏Vue开发社区
vue.config.js的优化配置（element-ui, echarts, lodash按需加载 ）
BundleAnalyzer 作用：展示打包图形化信息，会打开一个html页面，帮助自己分析哪些文件过大，可针对其进行优化，上线前 注释掉 安装 webpack-bundle-analyzer 插件 npm install webpack-bundle-analyzer --save-dev 在 vue.config.js: 里面： // 引入 const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 展示图形化信息 chainWebpack: config => { config .plugin('webpack-bundle-analyzer') .use(BundleAnalyzerPlugin) } 抽离 css 支持按需加载 安装 mini-css-extract-plugin ') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) if (process.env.NODE_ENV
9K52发布于 2020-09-11 - 来自专栏Coooooooooode！（前端）
Webpack 项目打包压缩优化
除了工具还需要阅读代码，查看使用的插件在项目中的场景，综合考虑解决办法 打包体积优化 安装 webpack-bundle-analyzer 会弹出一个网页来显示项目打包后的体积大小，根据打包提及来优化 使用 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports /dll/common-manifest.json') //对应生成的manifest文件路径 }) ] 此时运行npm run build webpack-bundle-analyzer弹出页面 mini-css-extract-plugin 分离样式文件，将ss提取为单独文件 DefinePlugin 定义全局常量，应用：在不用环境下引入不通的配置 speed-measure-webpack-plugin 输出打包内容速度 webpack-bundle-analyzer less代码 sass-loader 处理sass代码 babel-loader 把ES6转ES5 ts-loader 把typescript 转成es5 file-loader 打包图片，打包字体图标 webpack-bundle-analyzer
96451编辑于 2023-10-23 - 来自专栏call_me_R
如何使用webpack减少vuejs打包的大小
为此，我安装了webpack-bundle-analyzer。这将提供每个包中项目大小的可视指南。 npm install --save-dev webpack-bundle-analyzer 接下来，我在vue.config.js文件中配置webpack来使用它。 下面是我的配置文件vue.config.js的内容： const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') .BundleAnalyzerPlugin 使用webpack-bundle-analyzer确定哪些项目占用的空间最多。 然后开始采取必要步骤来减少这些项目的大小。 我能够通过这种方式减少捆绑中四个最大项目的大小。 地址：https://www.npmjs.com/package/webpack-bundle-analyzer 文章首发：https://github.com/reng99/blogs/issues/
3.8K10编辑于 2023-05-23 - 来自专栏各类技术文章~
记第一次性能优化——webpack打包优化
复制代码 二、 优化思路 * 废话 老实说一开始并没有什么想法，唯一的想法是尽量按需引入依赖，所以先安装了webpack-bundle-analyzer插件： npm i -D webpack-bundle-analyzer 然后在vue.config.js中配置插件： const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 的大小进行限制，可以指定一个chunk最小必须超过多少字符，那么我们把这个插件加入到配置(vue.config.js)中： const BundleAnalyzerPlugin = require('webpack-bundle-analyzer ] } } 复制代码 由于我并没有理解官方文档中说的characters具体是指什么（如果有知道的请一定要告诉我，非常感谢），然后尝试打包出来的结果和我设置预想的又有些出入，所以我最终只是对着webpack-bundle-analyzer
90820发布于 2021-10-26 - 来自专栏全栈开发
webpack构建优化：bundle体积从3M到400k之路
1、祭出神器把Bundle分析利器拿出来： webpack-bundle-analyzer是一个基于webpack的插件，能够用zoomable treemap可视化webpack输出文件的大小（Visualize size of webpack output files with an interactive zoomable treemap） image.png 不慌，喝口白开水，装上webpack-bundle-analyzer npm install webpack-bundle-analyzer 在webpack.app.config.js引入webpack-bundle-analyzer constBundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { output: { // entry: { //省略 }, plugins: [ new BundleAnalyzerPlugin(), ], }; 很简单吧，这样我们就配好了webpack-bundle-analyzer
4.4K50发布于 2018-12-06 - 来自专栏码客
Vue打包优化
具体步骤如下: 安装依赖 npm install webpack-bundle-analyzer -D 在 vue.config.js 中配置插件 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { chainWebpack: config => { config.plugin('webpack-bundle-analyzer') .use(BundleAnalyzerPlugin) } } 运行打包分析 npm run WebPack 借助插件webpack-bundle-analyzer我们可以直观的看到打包结果中，文件的体积大小、各模块依赖关系、文件是够重复等问题，极大的方便我们在进行项目优化的时候，进行问题诊断。 1、安装 npm i -D webpack-bundle-analyzer 2、配置插件 // 引入插件 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer
1.4K10编辑于 2023-04-27 - 来自专栏前端技术分享|前沿资讯|读书分享
webpack实战——生产环境配置【下】
2.2 webpack-bundle-analyzer “作用：分析一个bundle的构成。 安装 yarn add webpack-bundle-analyzer // or npm install webpack-bundle-analyzer --save-dev 配置 // webpack.config.js const WebpackBundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports
86440发布于 2020-10-09 - 来自专栏call_me_R
【译】如何使用webpack减少vuejs打包的大小
为此，我安装了webpack-bundle-analyzer。这将提供每个包中项目大小的可视指南。 npm install --save-dev webpack-bundle-analyzer 接下来，我在vue.config.js文件中配置webpack来使用它。 下面是我的配置文件vue.config.js的内容： const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') .BundleAnalyzerPlugin 使用webpack-bundle-analyzer确定哪些项目占用的空间最多。 然后开始采取必要步骤来减少这些项目的大小。 我能够通过这种方式减少捆绑中四个最大项目的大小。 参考和后话 原文：dev.to/ratracegrad… webpack-bundle-analyzer地址：www.npmjs.com/package/web… 文章首发：github.com/reng99
5.4K20发布于 2019-08-01 - 来自专栏前端迷
京东快递小程序分包优化实践
可以通过添加 webpack-bundle-analyzer 插件，实现依赖分析的可视化展示。主要步骤如下： a. 首先安装 webpack-bundle-analyzer 依赖: npm install webpack-bundle-analyzer -D b. mini: { webpackChain (chain, webpack) { chain.plugin('analyzer') .use(require('webpack-bundle-analyzer
1.3K10编辑于 2023-03-02 - 来自专栏前端自习课
【Webpack】320- Webpack4 入门手册（共 18 章）（下）
生成报表 这里我们使用 webpack-bundle-analyzer 插件，来对打包后的文件进行数据分析，从来找到项目优化的方向。 webpack-bundle-analyzer 使用交互式可缩放树形图可视化 webpack 输出文件的大小。 安装插件： npm install webpack-bundle-analyzer --save-dev 这个我们只有在开发环境中使用。 使用插件： // webpack.dev.js const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 》https://github.com/webpack-contrib/webpack-bundle-analyzer。
2.6K20发布于 2019-08-20
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号