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

當前項目環境

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中添加配置項

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

最后，我們就可以根據可視化的界面調整自己的項目結構了，是不是很好用呢。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。