webpack打包体积优化---插件 webpack-bundle-analyzer

安装

npm install --save-dev webpack-bundle-analyzer //安装webpack-bundle-analyzer
npm install cross-env –save -dev //解决 'NODE_ENV' 不是内部或外部命令，也不是可运行的程序或批处理文件 的报错

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

配置

/* webpack.base.conf.js文件中 */
module.exports = vuxLoader.merge(webpackConfig, {
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: "server",
analyzerHost: "127.0.0.1",
analyzerPort: 8888, // 运行后的端口号
reportFilename: "report.html",
defaultSizes: "parsed",
openAnalyzer: true,
generateStatsFile: false,
statsFilename: "stats.json",
statsOptions: null,
logLevel: "info"
})
]
});

/* package.json文件中 */
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --open --hot",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
"build": "node build/build.js",
"analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
}

运行
npm run analyz

首屏加载优化
根据可视化区域查看元素可知,面积越大,所占据的部分越多,就越需要减小
---------------------
作者：陶小橦
来源：CSDN
原文：https://blog.csdn.net/weixin_43704691/article/details/85245047
版权声明：本文为博主原创文章，转载请附上博文链接！