create-react-app 搭建的項目中,引入 webpack-bundle-analyzer 打包分析


  1. 安裝npm intall webpack-bundle-analyzer --save-dev
  2. 在 config/webpack.config.prod.js 文件(推薦)或 config/webpack.config.dev.js 中,添加
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    ...
    new BundleAnalyzerPlugin()
  ]
}
  1. 運行npm run build(推薦,這樣只在打包時,打開分析網頁;這個地方具體命令名,可在 package.json 文件中 scripts 部分修改)或npm run dev(每次運行這個命令,都會打開分析網頁),打包分析頁面:http://127.0.0.1:8888/
    scripts 部分,我修改成了:
"scripts": {
  "dev": "node scripts/start.js",
  "build": "node scripts/build.js",
  "test": "node scripts/test.js --env=jsdom",
  "analyze": "source-map-explorer dist/static/js/main.*"
},


免責聲明!

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



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