webpack打包优化_webpack打包体积优化

webpack

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-analyzeryarn 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'  })

打包

build

npm run build --reportyarn build --report

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

可以看到项目树

树结构

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

详细查看

webpack-bundle-analyzer的三种模式

webpack-bundle-analyzer

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