vue-cli打包優化之分析工具webpack-bundle-analyzer

// 1. 安裝
cnpm install webpack-bundle-analyzer --save-dev

// 2. 在/build/webpack.prod.conf.js文件中引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 而後配置一下:
plugins: [
    new BundleAnalyzerPlugin()
]

// 3. 在package.json文件中配置:
"scripts": {
    "analyz": "NODE_ENV=production npm_config_report=true npm run build"
}

// 4. 運行(會自動在瀏覽器打開:http://127.0.0.1:8888/)
npm run build

而後就會出現一張相似這樣的圖片
html

關於打包後文件太大的優化可查看 vue打包文件太大怎麼辦vue

相關文章
相關標籤/搜索