webpack打包体积优化

webpack官方定义

webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)或包裹(package)任何资源(resource or asset)。

当我们在使用webpack打包的时候，一定都遇到过项目体积过大，打包速度慢的问题，又苦于无法详细查看文件目录结构和大小，这时候webpack-bundle-analyzer就应运而生了，今天我们来看一下webpack-bundle-analyzer在实际的项目中是如何使用的：

webpack打包体积优化---插件 webpack-bundle-analyzer

https://www.npmjs.com/package/webpack-bundle-analyzer

当前项目环境

1. vue2.5版本，vue脚手架
2. "webpack": "^3.6.0"版本

下载

npm install --D webpack-bundle-analyzer
yarn add webpack-bundle-analyzer

使用

使用webpack-bundle-analyzer我们要在webpack中以插件的方式引入：

在config/webpack.prod.conf.js中引入

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

在plugins中添加配置项

 new BundleAnalyzerPlugin({
 // 可以是server/static/disabled。
 // server--->分析器将启动HTTP服务器来显示软件包报告
 // static--->会生成带有报告的单个HTML文件
 // disabled--->你可以使用这个插件来将`generateStatsFile`设置为`true`来生成Webpack Stats JSON文件
 analyzerMode: 'server',
 // 将在“服务器”模式下使用的主机启动HTTP服务器
 analyzerHost: '127.0.0.1',
 // 将在“服务器”模式下使用的端口启动HTTP服务器,配置端口号8888
 analyzerPort: 8888,
 // 路径捆绑，将在`static`模式下生成的报告文件
 // 相对于捆绑输出目录
 reportFilename: 'report.html',
 // 模块大小默认显示在报告中
 // 应该是`stat`，`parsed`或者`gzip`中的一个
 defaultSizes: 'parsed',
 // 在默认浏览器中自动打开报告
 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,
 // info, warn, error, silent,日志级别。可以是'信息'，'警告'，'错误'或'沉默'。
 logLevel: 'info' 
 })

打包

npm run build --report
yarn build --report

会自动启动node服务器，打开网页，http://127.0.0.1:8888/

可以看到项目树

我们可以单击某一文件，详细查看信息

webpack-bundle-analyzer的三种模式

最后，我们就可以根据可视化的界面调整自己的项目结构了，是不是很好用呢。