通过webpack-bundle-analyzer对vue项目打包优化

一，什么是webpack-bundle-analyzer

webpack-bundle-analyzer是webpack的插件，需要配合webpack和webpack-cli一起使用。这个插件可以读取输出文件夹（通常是dist）中的stats.json文件，把该文件可视化展现，生成代码分析报告，可以直观地分析打包出的文件有哪些，及它们的大小、占比情况、模块包含关系、依赖等，做出优化，而帮助提升代码质量和网站性能。

二，安装

1.在npm.js官网搜索 webpack-bundle-analyzer  官方文档

 

2.在我们的项目终端运行：

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

3.将一下代码引入到vue.config.js里

 

解决打包后白屏：

 没有publicPath属性时，默认访问的静态路径是服务器的根目录

服务器根目录下没有js文件夹所以访问失败

其实publicPath设置的目录，就是打包后的index.html的当前目录

 

 4.引入完之后就可以使用  npm run build --report   命令

   执行完后会通过默认浏览器打开来查看我们项目每个文件的大小

        stat：打包之前输出的文件大小

        prased：打包输出后的文件大小

        gizppen：开启gizp压缩后的文件大小

 三，配置

 

在我们的 externals里来配置 不需要打包的问件 

看个人项目中需求来进行配置

 

key:value

key是：第三方包的名 

value是：window对象的方法或属性

我们可以在mounted 或者 created 钩子函数中  console.log(window) 来查看

 

 

切记，被忽略的文件要采用CDN的方式来引入，引入CDN版本要和开发时版本保持一致，避免不兼容的BGU   

查找CDN的地址：字节跳动静态资源公共库

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

 

如果出现一下bug  我们只需要  调换引入顺序 在引入element-ui 之前需要引入VUE 的 CDN 

然后重新打包

 

最后 我们在执行 npm run build --report  来查看我们打包后的项目文件大小  很明显的会被压缩