Webpack Bundle Analyzer插件的使用

VishKozus 发布于2019-08-23 14:26 / 2613人阅读

摘要：一原理读取输出文件夹通常是中的文件，把该文件可视化展现的插件。便于直观地比较各个文件的大小，以达到优化性能的目的。命令行中键入命令浏览器自动打开分析页面

一、原理

读取输出文件夹（通常是dist）中的stats.json文件，把该文件可视化展现的插件。便于直观地比较各个bundle文件的大小，以达到优化性能的目的。

二、安装

> npm install webpack-bundle-analyzer --save-dev

三、作为webpack插件使用 1、引入

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin

2、使用

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
...
}))

四、2种方式 1、每次构建时自动打开

构建完成之后，浏览器会自动打开localhost:8888,不用改动package.json

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
    analyzerMode: "server",
    generateStatsFile: true,
    statsOptions: { source: false }
}))

配置参数记得补上，不然构建完不会自动打开～

2、运行特定命令才打开

（1）把analyzerMode设置为disabled

webpackConfig.plugins.push(new BundleAnalyzerPlugin({
    analyzerMode: "disabled",
    generateStatsFile: true,
    statsOptions: { source: false }
}))

（2）在package.json的scripts字段中加入

"bundle-report": "webpack-bundle-analyzer --port 8123 dist/stats.json"

其中stat.json文件的位置在打包后的文件夹中，通常是dist，具体情况根据实际情况来定。

（3）命令行中键入命令
npm run bundle-report

浏览器自动打开分析页面:localhost:8123

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100610.html

webpack4使用笔记之plugin

摘要：默认为根据自己的指定的模板文件来生成特定的文件主要是针对多入口文件。那么选项就可以决定是否都使用这些生成的文件。压缩压缩通过使用可以看到项目各模块的大小，可以按需优化图片来自于的 webpack4 常用plugin clean-webpack-plugin html-webpack-plugin mini-css-extract-plugin terser-webpack-plugi...

ymyang 2019-08-23 14:57 评论0 收藏0
webpack4 SplitChunks实现代码分隔详解

摘要：代码均放在仓库给我们带来了一些改变。插件以前使用允许我们将公共依赖项提取到现有的或全新的代码块中。代码详情见文章开头仓库。这才是配置的关键缓存组会继承的配置，但是和只能用于配置缓存组。可以通过禁用缓存组。代码均放在git仓库 Webpack 4给我们带来了一些改变。包括更快的打包速度，引入了SplitChunksPlugin插件来取代（之前版本里的）CommonsChunksPlugin插件...

Zachary 2019-05-23 17:29 评论0 收藏0
vue-cli项目优化，缩短首屏加载时间

摘要：主要是首屏加载太慢。文件按需加载如果没有这个设置，项目首屏加载时会加载整个网站所有的文件，所以将文件拆开，点击某个页面时再加载该页面的是一个很好的优化方法。在中，不要使用的方法引入组件，使用。使用插件，将的值改成。主要是首屏加载太慢。大文件定位我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。 ...

lufficc 2019-08-29 16:24 评论0 收藏0
vue-cli项目优化，缩短首屏加载时间

摘要：主要是首屏加载太慢。文件按需加载如果没有这个设置，项目首屏加载时会加载整个网站所有的文件，所以将文件拆开，点击某个页面时再加载该页面的是一个很好的优化方法。在中，不要使用的方法引入组件，使用。使用插件，将的值改成。主要是首屏加载太慢。大文件定位我们可以使用webpack可视化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解决过大的js文件。 ...

hedzr 2019-08-26 12:11 评论0 收藏0