定位webpack文件大小


之前發現一個神器,記錄一下,可以可視化webpack打包的每個js文件大小,這樣對我們優化代碼是有幫助的,有目標的

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

這是wbpack-bundle-analyzer這個工具的地址

1、在package.json加入這行命令  “analyz”: “NODE_ENV=production npm_config_report=true npm run build”

2、安裝webpack-bundle-analyzer cnpm install --save-dev webpack-bundle-analyzer

3、在webpack.config.js里增加如下代碼

 

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

// ...

plugins: [new BundleAnalyzerPlugin()]

// ...

 

4、運行analyz npm run analyz 默認會打開 http://127.0.0.1:8888 作為展示


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM