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

一，什么是--

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

二，安装

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

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

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

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

解决打包后白屏：

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

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

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

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

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

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

：打包输出后的文件大小

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

三，配置

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

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

key:value

key是：第三方包的名

value是：对象的方法或属性

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

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

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

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

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

然后重新打包

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