Webpack Bundle Analyzer 使用常见问题
这里写自定义目录标题一:安装二:配置三:常见问题一:安装npm intall webpack-bundle-analyzer –save-dev二:配置在vue.config.js 里面const Webpack = require('webpack');const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").B...
·
一:安装
npm intall webpack-bundle-analyzer –save-dev
二:配置
在vue.config.js 里面
const Webpack = require('webpack');
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
...
module.exports = {
...
configureWebpack: {
plugins: [
new BundleAnalyzerPlugin({ // 插件在这里使用
analyzerHost: '127.0.0.1',
// 将在“服务器”模式下使用的端口启动HTTP服务器。
analyzerPort: 8889,
analyzerMode: 'server',
openAnalyzer: false
}),
new Webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery'
})
],
{
// 在`server`模式下,分析器将启动HTTP服务器来显示软件包报告。
// 在“静态”模式下,会生成带有报告的单个HTML文件。
// 在`disabled`模式下,你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件。
analyzerMode:'server' | 'static' | 'disabled',
analyzerHost: '127.0.0.1', // 将在“服务器”模式下使用的主机启动HTTP服务器。
analyzerPort: 8888, // 将在“服务器”模式下使用的端口启动HTTP服务器。
reportFilename: 'report.html', // 路径捆绑,将在`static`模式下生成的报告文件。 相对于捆绑输出目录。
defaultSizes: 'stat' | 'parsed' | 'gzip', // 模块大小默认显示在报告中。应该是`stat`,`parsed`或者`gzip`中的一个。
openAnalyzer: true, // 如果为true,则Webpack Stats JSON文件将在bundle输出目录中生成
generateStatsFile: false, // 如果`generateStatsFile`为`true`,将会生成Webpack Stats JSON文件的名字。
statsFilename: 'stats.json', // stats.toJson()方法的选项。
// 例如,您可以使用`source:false`选项排除统计文件中模块的来源。
// 在这里查看更多选项:https: //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null or {Object},
excludeAssets: {null\|pattern\|pattern[]} where pattern equals to {String\|RegExp\|function},
logLevel: 'info' | 'warn' | 'error' | 'silent', // 日志级别。可以是'信息','警告','错误'或'沉默
}
三:常见问题
修改完代码,代码打包出现 端口占用的情况,这个时候要关闭服务,再次npm run build
如果想关闭分析 设置 analyzerMode: ‘disabled’ 即可
更多推荐
已为社区贡献1条内容
所有评论(0)