Vue 项目上线优化

],

plugins: [‘transform-remove-console’]

}

这样配置后 再次打包 包中就没有console了

问题:当运行npm run serve时 也会删除console 但是开发阶段我们需要

改善babel.config文件:

在这里插入图片描述

现在 只有在打包时会删除console

改善入口文件


初衷:

项目中的默认入口文件时main.js文件 不管是打包 还是开发阶段使用的都是这一文件

在卡法阶段我们可能调用一端口返回假数据 为调试我们的代码 但是在上线后我们需要用正式接口 可能不止一个 但是我们左右手动更改较为麻烦 且容易出错

在这里插入图片描述

优化:

  1. 创建两个入口文件:
  • 一个用于开发环境的打包 dev_env.js

  • 一个用于项目上线的打包 prod_env.js

  1. 配置打包的入口文件

module.exports={

chainWebpack:config=>{

config.when(process.env.NODE_ENV === ‘production’,config=>{

config.entry(‘app’).clear().add(‘./src/prod_env.js’)

})

config.when(process.env.NODE_ENV === ‘development’,config=>{

config.entry(‘app’).clear().add(‘./src/dev_env.js’)

})

}

}

说明

  • 开发时,使用 npm run serve 命令,NODE_ENV 的值就是 developmnent ,所以会将 dev.env.js 作为入口文件

  • 部署时,使用 npm run build 命令,NODE_ENV 的值就是 production,所以会将 prod_evn.js 作为入口文件

改善打包时包的体积大小


初衷:

通常情况下 项目中通过import方式引入的包 会将整个包下载到客户端 这可能会导致程序的加载速度非常慢

优化

解决方案一:CDN

将线上环境中用到一些依赖,比如 vue、vueRouter 、axios 等,使用 cdn 节点的方式引用,而不是打到包里去

此项目中 将项目上线后仍然需要用到的一些依赖包从prod_evn.js文件中删除 然后在 public/index.html 中使用 cdn 节点引用

  • 首先修改我们上线时的入口文件

在这里插入图片描述

  • 然后在 public/index.html 中加入如下引用
  • 最后在 vue.config.js 中添加配置

在这里插入图片描述

打包后 包的体积明显减小

路由懒加载


初衷:

在上面 通过babel 插件 将console删除 通过CDN节点 等 减小包的体积 但是包还是过大 影响加载速度 以当前项目为例,首先展示的登录页,事实上,此时没有必要加载其他的组件,如商品、类别、角色用户等组件的代码

因为代码被打包到一个文件中,导致下载这个文件太慢

优化:

切分之后,并不是浏览器访问某个路由,才去下载对应的模块,仍然在首次访问程序时,下载所有模块,只不过每个模块分的很小,加载首页时需要的模块能够更快的下载下来,所以能够更快的显示

  1. 安装插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

  1. 修改babel配置文件

在这里插入图片描述

  1. 修改 router/index.js 中的路由引用

// // 引入login.vue组件

// import Login from ‘…/components/login.vue’

// // 引入home.vue组件

// import Home from ‘…/components/home.vue’

// import Welcome from ‘…/components/welcome.vue’

// import Users from ‘…/components/user/users.vue’

// import Rights from ‘…/components/rights/rights.vue’

// import Role from ‘…/components/rights/role.vue’

// import Category from ‘…/components/goods/Category.vue’

// import Params from ‘…/components/goods/Params.vue’

// import GoodsList from ‘…/components/goods/GoodsList.vue’

// import GoodsAdd from ‘…/components/goods/GoodsAdd.vue’

// import Orders from ‘…/components/order/Orders.vue’

// import Report from ‘…/components/report/Report.vue’

// import GoodsEdite from ‘…/components/goods/GoodsEdite.vue’

const Login = () => import(/* webpackChunkName: “group-login” */ ‘…/components/login.vue’)

const Home = () => import(/* webpackChunkName: “group-common” */ ‘…/components/home.vue’)

const Welcome = () => import(/* webpackChunkName: “group-common” */ ‘…/components/welcome.vue’)

const Users = () => import(/* webpackChunkName: “group-common” */ ‘…/components/user/users.vue’)

const Rights = () => import(/* webpackChunkName: “group-rights” */ ‘…/components/rights/rights.vue’)

const Role = () => import(/* webpackChunkName: “group-rights” */ ‘…/components/rights/role.vue’)

const Category = () => import(/* webpackChunkName: “group-goods” */ ‘…/components/goods/Category.vue’)

const Params = () => import(/* webpackChunkName: “group-goods” */ ‘…/components/goods/Params.vue’)

const GoodsList = () => import(/* webpackChunkName: “group-goods” */ ‘…/components/goods/GoodsList.vue’)

const GoodsAdd = () => import(/* webpackChunkName: “group-goods” */ ‘…/components/goods/GoodsAdd.vue’)

const GoodsEdite = () => import(/* webpackChunkName: “group-goods” */ ‘…/components/goods/GoodsEdite.vue’)

const Orders = () => import(/* webpackChunkName: “group-rrders” */ ‘…/components/order/Orders.vue’)

const Report = () => import(/* webpackChunkName: “group-Orders” */ ‘…/components/report/Report.vue’)

重新打包效果可见

router/index.html 主页内容的形成


初衷:

在上面我们使用cdn节点进行优化时。在index.html中 添加大量cdn节点的引入

但是在开发阶段的打包中我们是不需要这种方式的 但是手动删除或者添加这些cdn节点实在麻烦

优化:

我们希望的是,部署的时候 index.html 中使用这些 CDN 节点的依赖,开发阶段,不希望 index.html 中的这些引用存在,而是继续使用本地的包

这就需要在 index.html 中根据当前的打包环境是开发还是部署,动态的决定 index.html 中是否显示这些引用

  • 在vue.config.js中添加配置

在这里插入图片描述

  • 修改public/index.html

在这里插入图片描述

这样 首页中的cdn引入代码 就不会冲突

服务器文件压缩


初衷:

文末

篇幅有限没有列举更多的前端面试题,小编把整理的前端大厂面试题PDF分享出来,一共有269页

  • 13
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值