Vue 项目上线优化

npm install babel-plugin-transform-remove-console --save-dev

2. 配置babel.config文件

const prodPlugins = []

if (process.env.NODE_ENV === ‘production’) {

prodPlugins.push(‘transform-remove-console’)

}

module.exports = {

presets: [

‘@vue/cli-plugin-babel/preset’

],

plugins: [‘transform-remove-console’]

}

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

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

改善babel.config文件：

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

改善入口文件

---

初衷：

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

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

优化：

1. 创建两个入口文件：

• 一个用于开发环境的打包 dev_env.js

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

2. 配置打包的入口文件

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

2. 修改babel配置文件

3. 修改 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’

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素