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

2024-10-18 18:19:57

安装npm intall webpack-bundle-analyzer --save-dev
在 config/webpack.config.prod.js 文件（推荐）或 config/webpack.config.dev.js 中，添加

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

module.exports = {

　　plugins: [

　　　　...

　　　　new BundleAnalyzerPlugin()

　　]

}

运行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.*"

},

最新文章

热门文章