webstrom中打包的详细_webpack打包体积优化
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)境
下載
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)題。
- 上一篇: 计算机绘图模型的参数方程,关于曲线绘图与
- 下一篇: java洗牌_java语言实现简单的洗牌