前端--Vue项目优化策略

项目优化策略

一、生成打包报告

1.通过nprogress添加进度条效果

https://www.cnblogs.com/xiaoxiao2017/p/11317939.html

2.babel-plugin-transform-remove-console

1.这个是babel的插件，会自动解析当前项目里面的.babelrc babel.config.js

2.在配置文件里面做好了配置以后，重启我们的服务器，就会加载这个文件，只要用了插件，所有最后的代码都会把console语句删除。（无论开发或生产环境都会删除）不利于开发，所以我们在去除console打印的时候，一定要区分当前是开发环境还是生产环境

3.怎么样区分你当前环境是开发环境还是生产环境？

我们在使用 npm run serve
等价于 vue-cli-service serve
这个命令本质上有个参数省略了  --mode development

在使用 npm run build 就等价于 vue-cli-service build --mode production

在 babel.config.js 里面 通过 process.env.NODE_ENV的值 是等于 development 还是 production 来区分当前是开发环境 还是生产环境

3.生成打包报告

打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种：

通过命令行参数的形式生成报告

// 通过 vue-cli 的命令选项可以生成打包报告
// --report 选项可以生成 report.html 以帮助分析包内容
vue-cli-service build --report

通过可视化的ui面板直接查看报告

在可视化的UI面板，通过控制台和分析面板，可以方便地看到项目中所存在的问题

1. 通过打包之后的界面， 我们的项目资源有3.2MB， 然后依赖项就占用了 3.0MB
2. 可以看到用户在不同的网络状态下面 访问我们项目所花费的时间，从而针对不同的用去优化
3. 会发现打包以后 有一个文件 chunk-vendors.js 非常的大，因为这个文件内部，包含我们所有import进来的第三方包；导致体积过大，(element-ui,ehcarts,quill,moment)

vue里面配置webpack

1. 因为从vue-cli 3.x 版本开始， 官方让程序员专注于业务的开发，不用管配置文件。但是如果我们想自己的项目可定制化，配置一些自己的打包参数，那么就需要使用一个文件，文件的名称是固定写法 vue.config.js --文档 https://cli.vuejs.org/zh/guide/webpack.html
2. 以前我们学习的webpack的知识，现在这里都可以使用，只不过换了一个文件名而已，但是一般90%我们使用不到配置； 如果要用，就去网上复制别人的代码，然后再根据自己的项目，修改一下即可

二、第三方库启用CDN

怎么减少项目打包后 JS 的 chunk 包的体积

1. 为什么这个js报的体积会这么大？
   因为我们项目里面 只要是 import 导入进来的 第三方的包，针对js文件，全部会把它们打包到我们的chunk-vendor.js 这个包里面，所以体积非常大

解决方法

在webpack打包的过程当中，我们手动写配置文件，通过一个属性 externals 来告诉 webpack，不要把 我这个配置对象里面，配置的包 打包进入我的 chunk-vendor.js 里面去， 这几个包我自己通过cdn的方式去下载(link script-- 这几个下载方式，是写在index.html)

这个方式，取决于下载CDN下载包的速度

三、element-UI组件按需加载

参考官方文档：https://element.eleme.io/#/zh-CN/component/quickstart

在项目中只导入项目中需要用到的组件，没有必要全部加载。

四、路由懒加载

参考官方文档：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

五、首页内容定制

不同的打包环境下，首页内容可能会有所不同，我们可以通过插件的方式进行定时，插件配置：

https://www.cnblogs.com/joe235/p/12624546.html

六、JS脚本优化

1. 按需加载组件和路由
2. 图片懒加载，列表分页
3. 使用节流与防抖减少事件触发频率
4. 尽量使用CSS动画代替js动画
5. JS脚本放在底部或异步获取，防止阻塞资源加载

七、服务器优化

1. 减少Http请求，合并页面资源，js，css单一入口。
2. js特殊可以分为两个文件，一个业务逻辑，一个非业务逻辑
3. 把小图标合成雪碧图，不太适用经常更新的移动端开发
4. 把小的图片，字体等资源base64化
5. 开启GZip压缩，减少资源传输大小
6. 使用强缓存和协商缓存，减少资源重复请求

参考链接：web前端优化
来源：简书