前端项目优化

1、生成打包报告

通过可视化的UI面板直接查看报告
在可视化的UI面板中，通过控制台和分析面板，可以方便地看到项目中所存在的问题。
2、通过 externals 加载外部 CDN（内容分发网络）资源

默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。
为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在externals 中的第三方依赖包，都不会被打包
例：

config.set('externals', {
	vue: 'Vue',
	'vue-router': 'VueRouter',
	axios: 'axios',
	lodash: '_',
	echarts: 'echarts',
	nprogress: 'NProgress',
	'vue-quill-editor': 'VueQuillEditor'
})

同时，需要在 public/index.html 文件的头部，添加 CDN 资源引用
可在此网站搜索CDN链接：https://www.bootcdn.cn/
但有时会出现CDN链接失效的情况

3、路由懒加载

① 安装 @babel/plugin-syntax-dynamic-import 包
② 在 babel.config.js 配置文件中声明该插件
③ 将路由改为按需加载的形式，示例代码如下：

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

4、gzip 压缩

在服务端配置中开启GZIP压缩，它会把浏览器请求的页面，以及页面中引用的静态资源以压缩包的形式发送到客户端,然后在客户端完成解压和拼装。js文件可以开启，但是图片文件不要，不仅浪费了CPU（压缩需要cpu运算），还增大了体积。