webpack打包分析工具 webpack-bundle-analyzer
前沿:一个陌生而又成熟的项目webpack打包往往很慢,这时候我用到了webpack-bundle-analyzer这个webpack的分析工具配置非常简单:1.安装npm/cnpm install --save-dev webpack-bundle-analyzer2.配置config/index.jsmodule.exports = {build: {...// Run the build c
·
前沿:
一个陌生而又成熟的项目webpack打包往往很慢,这时候我用到了webpack-bundle-analyzer这个webpack的分析工具
配置非常简单:
- 1.安装npm/cnpm install --save-dev webpack-bundle-analyzer
- 2.配置config/index.js
module.exports = {
build: {
...
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
...
}
- 3.build/webpack.prod.conf.js文件中,webpackConfig就是上面的config/index
...
if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
...
- 打包是输入npm run build --report
可以看到打包出来的所有文件所占的大小,比较直观
更多推荐
已为社区贡献5条内容
所有评论(0)