場景：優化打包后的代碼，提高性能，
1.方式一：report-json，
1.1 package.json檔案里加入以下命令，
"report": "vue-cli-service build --report-json"
1.2 然后控制臺運行 npm run report
1.3 結果：會在dist檔案夾里生成 report.json，里面有打包后每個檔案的來源，
2.方式二：使用 stats-webpack-plugin 插件，
2.1 安裝 npm install stats-webpack-plugin --save-dev
2.2 修改 vue.config.js 檔案的 configureWebpack， 如下：
const StatsPlugin = require('stats-webpack-plugin'); module.exports = { configureWebpack:{ plugins: [new StatsPlugin('stats.json', { // 查看stats chunkModules: true, chunks: true, assets: false, modules: true, children: true, chunksSort: true, assetsSort: true })], }, };
2.3 結果：會在檔案根目錄生成一個 stats.json 檔案
2.4 打開 http://alexkuz.github.io/webpack-chart/ 這個網站， 打開2.3步驟里生成的stats.json，例如：
3.方式三：使用 webpack-bundle-analyzer
3.1 安裝 npm install webpack-bundle-analyzer --save-dev
3.2 修改 vue.config.js 檔案里的 chainWebpack，如下：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { chainWebpack: (config) => { config.plugin('webpack-bundle-analyzer') // 打包分析 .use(BundleAnalyzerPlugin) .init(Plugin => new Plugin()); }, };
3.3 會自動在本地起一個服務，查看到生成檔案的關系圖，
4.再推薦一個網站分析的網站 https://gtmetrix.com/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/155339.html
標籤：JavaScript
上一篇：JS筆記之第一天
下一篇：react-mockjs