江苏龙网

  1. 首页 > 资讯 > 科技 > >

CSDN|VUE 项目如何快速优化？| 原力计划


CSDN|VUE 项目如何快速优化？| 原力计划
本文插图
作者 | 靖凡无所畏惧 责编 | 屠敏 出品 | CSDN 博客
前言
相信现在很多人都是用Vue做过了各种项目 ， 但是项目代码做完和上线并不代表这结束 ， 还有上线以后的优化也是很重要的一点 ， 这次的博客就来给大家说一下如何优化一下Vue的项目 ， 让你的项目打包和运行速度更上一个台阶 。
【CSDN|VUE 项目如何快速优化？| 原力计划】 优化策略

  1. 生成打包报告
  2. 修改webpack默认配置
  3. 加载外部CDN资源
  4. 路由懒加载
  5. 开启gizp配置

生成打包报告
生成Vue的打包报告目的在于让我们先大概的了解到当前项目生成的各个文件的大小 ， 让我们心里有数 ， 知道哪里需要优化 。
通过命令行参数形式生成报告：
//通过 vue-cli的命令选项可以生成打包报告// --report 选项可以生成 report.html 用以分析包内容vue-cli-service build --report通过可视化面板直接查看报告：
可以在UI面板中 ， 通过控制台和分析面板 ， 可以方便的查看项目中所存在的问题 。
CSDN|VUE 项目如何快速优化？| 原力计划
本文插图

CSDN|VUE 项目如何快速优化？| 原力计划
本文插图
上边图片中标注的就是我们需要注意的 ， 依赖项很多 ， 导致打的包最终体积非常的大 ， 相信这项目如果上线那么前端会先请求这个无比巨大的js文件 ， 估计甲方爸爸会锤死前端人员 。
通过 vue.config.js修改webpack的默认配置
通过vue-cli 3,0 工具生成的项目 ， 默认隐藏了所有的 webpack配置项 ， 目的是为了屏幕项目的配置过程 ， 让程序员的工作重心放到具体的功能和逻辑的实现上 。
如果程序员有修改 webpack默认配置的需求 ， 可以在项目根目录中 按需创建vue.config.js这个配置文件 ， 从而对项目的打包发布过程做自定义配置 ， 具体可以参考 https://cli.vuejs.org/zh/config/#vue-config-js
为开发模式和发布模式指定不同的打包入口：
默认情况下 ， Vue项目的开发模式和发布模式公用一个入口文件(src/main.js) ， 为了将项目的开发过程与发布过程分离 ， 我们可以设置两种模式 ， 各自指定打包入口文件 。
  1. 开发模式入口文件：src/main-dev.js
  2. 发布模式入口文件：src/main-prod.js
通过chainWebpack自定义打包入口：
module.exports = { lintOnSave: false, chainWebpack:config=>{ //生产环境 config.when(process.env.NODE_ENV === 'production',config=>{ //注意main-prod.js是已经存在的文件 config.entry('app').clear.add('./src/main-prod.js') }) //开发环境'development',config=>{ //注意main-dev.js是已经存在的文件 config.entry('app').clear.add('./src/main-dev.js') }) }}因为开发生产环境不同 ， 所以在main.js文件中内容就可能不同 ， 为了解决耦合 ， 我们就把main.js 重新划分成了两个文件 分别是main-dev.js 和 main-prod.js
通过externals加载外部CDN资源:
默认情况下 ， 通过import语法导入的第三方依赖包 ， 最终会打包合并到同一个文件中 ， 从而导致打包成功后 ， 单文件体积过大的问题 。
CSDN|VUE 项目如何快速优化？| 原力计划
本文插图
vue.config.js的配置externals节点：
module.exports = { lintOnSave: false, chainWebpack:config=>{ //生产环境 config.when(process.env.NODE_ENV === 'production',config=>{ config.entry('app').clear.add('./src/main-prod.js') config.set('externals',{ vue:'Vue', 'vue-router':'VueRouter', axios:'axios', lodash:'_', echarts:'echarts', nprogress:'NProgress', 'vue-quill-editor':'VueQuillEditor' }) }) //开发环境 config'development',config=>{ config.entry('app').clear.add('./src/main-dev.js') }) }}


推荐阅读


上一篇：技术|中美技术脱钩对全球半导体供应链的影响

下一篇：|荣耀平板V6火爆热销中 618活动大促售价低至2099元