webpack

webpack打包體積優(yōu)化

webpack官方定義

webpack 是一個(gè)模塊打包器。webpack 的主要目標(biāo)是將 JavaScript 文件打包在一起，打包后的文件用于在瀏覽器中使用，但它也能夠勝任轉(zhuǎn)換(transform)、打包(bundle)或包裹(package)任何資源(resource or asset)。

當(dāng)我們?cè)谑褂脀ebpack打包的時(shí)候，一定都遇到過(guò)項(xiàng)目體積過(guò)大，打包速度慢的問(wèn)題，又苦于無(wú)法詳細(xì)查看文件目錄結(jié)構(gòu)和大小，這時(shí)候webpack-bundle-analyzer就應(yīng)運(yùn)而生了，今天我們來(lái)看一下webpack-bundle-analyzer在實(shí)際的項(xiàng)目中是如何使用的：

webpack打包體積優(yōu)化---插件 webpack-bundle-analyzer

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

當(dāng)前項(xiàng)目環(huán)境

vue2.5版本，vue腳手架

"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中添加配置項(xiàng)

new BundleAnalyzerPlugin({ // 可以是server/static/disabled。 // server--->分析器將啟動(dòng)HTTP服務(wù)器來(lái)顯示軟件包報(bào)告 // static--->會(huì)生成帶有報(bào)告的單個(gè)HTML文件 // disabled--->你可以使用這個(gè)插件來(lái)將`generateStatsFile`設(shè)置為`true`來(lái)生成Webpack Stats JSON文件 analyzerMode: 'server', // 將在“服務(wù)器”模式下使用的主機(jī)啟動(dòng)HTTP服務(wù)器 analyzerHost: '127.0.0.1', // 將在“服務(wù)器”模式下使用的端口啟動(dòng)HTTP服務(wù)器,配置端口號(hào)8888 analyzerPort: 8888, // 路徑捆綁，將在`static`模式下生成的報(bào)告文件 // 相對(duì)于捆綁輸出目錄 reportFilename: 'report.html', // 模塊大小默認(rèn)顯示在報(bào)告中 // 應(yīng)該是`stat`，`parsed`或者`gzip`中的一個(gè) defaultSizes: 'parsed', // 在默認(rèn)瀏覽器中自動(dòng)打開報(bào)告 openAnalyzer: true, // 如果為true，則Webpack Stats JSON文件將在bundle輸出目錄中生成 generateStatsFile: false, // 如果generateStatsFile為`true`，將會(huì)生成Webpack Stats JSON文件的名字 // 相對(duì)于捆綁輸出目錄 statsFilename: 'stats.json', // stats.toJson()方法的選項(xiàng) // 例如，您可以使用`source：false`選項(xiàng)排除統(tǒng)計(jì)文件中模塊的來(lái)源 // 在這里查看更多選項(xiàng)：https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21 statsOptions: null, // info, warn, error, silent,日志級(jí)別?？梢允?#39;信息'，'警告'，'錯(cuò)誤'或'沉默'。 logLevel: 'info' })

打包

build

npm run build --reportyarn build --report

會(huì)自動(dòng)啟動(dòng)node服務(wù)器，打開網(wǎng)頁(yè)，http://127.0.0.1:8888/

可以看到項(xiàng)目樹

樹結(jié)構(gòu)

我們可以單擊某一文件，詳細(xì)查看信息

詳細(xì)查看

webpack-bundle-analyzer的三種模式

webpack-bundle-analyzer

最后，我們就可以根據(jù)可視化的界面調(diào)整自己的項(xiàng)目結(jié)構(gòu)了，是不是很好用呢。

總結(jié)

以上是生活随笔為你收集整理的webstrom中打包的详细_webpack打包体积优化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。