vuecli3如何配置webpack打包报告分析

Posted 古墩古墩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuecli3如何配置webpack打包报告分析相关的知识,希望对你有一定的参考价值。

首先需要安装webpack-bundle-analyzer插件

npm install webpack-bundle-analyzer --save-dev

然后在config.js中配置

module.exports = {
    chainWebpack: config => {
        config
            .plugin(‘webpack-bundle-analyzer‘)
            .use(require(‘webpack-bundle-analyzer‘).BundleAnalyzerPlugin)
    }

}

运行命令

npm run serve

也可以在打包时运行

npm run build --report

 

效果:

localhost:8888是固定端口,本地不要占用即可正常访问

略。。。之后就弹出窗口了

 

 

以上是关于vuecli3如何配置webpack打包报告分析的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli 2.x 多环境打包配置,根据打包命令生成不同的打包文件名

vue-cli3 chainWebpack如何修改webpack内部配置

VUE vue-cli3配置打包后的文件加上版本号

webpack 打包优化的四种方法(多进程打包,多进程压缩,资源 CDN,动态 polyfill)

webpack打包vue项目,可修改配置文件

vuecli3全局引入jquery