项目优化策略
一、生成打包报告
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面板,通过控制台和分析面板,可以方便地看到项目中所存在的问题
- 通过打包之后的界面, 我们的项目资源有3.2MB, 然后依赖项就占用了 3.0MB
- 可以看到用户在不同的网络状态下面 访问我们项目所花费的时间,从而针对不同的用去优化
- 会发现打包以后 有一个文件 chunk-vendors.js 非常的大,因为这个文件内部,包含我们所有import进来的第三方包;导致体积过大,(
element-ui
,ehcarts
,quill
,moment
)
vue
里面配置webpack
- 因为从
vue-cli 3.x
版本开始, 官方让程序员专注于业务的开发,不用管配置文件。但是如果我们想自己的项目可定制化,配置一些自己的打包参数,那么就需要使用一个文件,文件的名称是固定写法 vue.config.js --文档 https://cli.vuejs.org/zh/guide/webpack.html - 以前我们学习的
webpack
的知识,现在这里都可以使用,只不过换了一个文件名而已,但是一般90%我们使用不到配置; 如果要用,就去网上复制别人的代码,然后再根据自己的项目,修改一下即可
二、第三方库启用CDN
怎么减少项目打包后 JS 的 chunk 包的体积
- 为什么这个
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脚本优化
- 按需加载组件和路由
- 图片懒加载,列表分页
- 使用节流与防抖减少事件触发频率
- 尽量使用CSS动画代替js动画
- JS脚本放在底部或异步获取,防止阻塞资源加载
七、服务器优化
- 减少Http请求,合并页面资源,js,css单一入口。
- js特殊可以分为两个文件,一个业务逻辑,一个非业务逻辑
- 把小图标合成雪碧图,不太适用经常更新的移动端开发
- 把小的图片,字体等资源base64化
- 开启GZip压缩,减少资源传输大小
- 使用强缓存和协商缓存,减少资源重复请求
参考链接:web前端优化
来源:简书