记录项目优化过程（webpack）

大家好，我是青晚舟，最近是公司项目接手了一个新需求，关于项目打包速度启动速度包体积的优化，所以这次主要是分享一次关于实际项目中webpack的优化，以及我的一些心得体会。

1.项目介绍&准备工作

1. #环境介绍

   电脑:mac m1 系统

   vuecli脚手架版本:5.0.8

   vue版本:2.6.11

   webpack版本 :4x

2. #准备工作

使用vue命令 解析当前vue项目默认的webpack 配置、包括链式访问规则和插件的提示打印到 stdout。

vue inspect > output.js

使用两个插件用来量化打包时间跟打包分析

speed-measure-webpack-plugin: npm i speed-measure-webpack-plugin -D
webpack-bundle-analyzer:在 Vue-cli 3.x 下，已经内置插件，无需手动安装,不确定自己有没有可以到
当前项目目录下/node_modules/webpack-bundle-analyzer中寻找 能找到就是有

通过server服务展示打包后文件大小，浏览器打开 `127.0.0.1:8888`即可显示。

使用命令npm run build 进行打包 , 第一个打包未做任何优化,足足136.1MB。使用时间1分53秒

2.开始优化，因为我们是要做关于体积优化，打包速度优化，首屏加载优化三方面，所以我们将分成三个步骤来做

##### 体积优化

1.使用SourceMap设置打包文件不需要map文件,map文件主要是一个映射文件，因为前端打包好的文件代码都被编译过了，
即使报错程序也不能提示是哪报的错，而map文件作为映射文件就是为了方便我们调试线上错误。
一般情况下我们都是不用生成map文件的,这次生产的文件缩小了一半变成了57.9MB,但是还是达不到我们的要求，继续优化

2.去除console.log和注释信息 防止信息泄漏 注意JS文件的压缩: uglifyjs-webpack-plugin webpack4以上已经内置了,可以直
接去node_modules中查看搜索terser-webpack-plugin这个包看看有没有，一般这个操作体积减少不会大于1MB

3.使用CDN对项目中那些引入包比较大的并且使用频率不是很多的进行CDN引入,最后在configureWebpack下externals进行替换，但是这种方式有个缺点就是你需要保证你使用CDN引入的节点要稳定不然可能会出现资源获取不到的问题。而且引入的时候需要定义externals有些名称不对的话也是加载不进来的。

4. 因为项目的原因，体积优化就暂时做到这。其实对项目体积优化最大的一部分就是关于一些包的CDN引入至于能少多少就是看你了，我使用的CDN没有上面图片使用的那么多 最后就是减少了2MB的大小。速度的话其实也快了大概5秒钟左右。

👋 写在最后

以上内容纯粹代表自己观点。顺便记录学习一下。不然记得快忘的更快。下文我们做打包速度的优化，我们下文再见。