当使用vue做完项目后，就是进行线上部署了。但是上线之前还是要做很多方面的优化，这样可以让项目上线后的体验更好。

第一步使用： vue ui 命令来运行vue的图形化管理工具

优化线上项目，首先在上线打包时我们通过babel插件将console 控制台打印清除，当然对项目打包后的体积的影响是微乎其微，对项目的入口文件的改善也是很有必要的，因为在开发阶段和上线如果我们使用的是假数据，使用同一接口我们需要频繁更改上线和开发接口，所以我们通过配置vue.config.js文件使上线和开发阶段我们使用不同的接口文件，省去了更改接口等不必要的麻烦，考虑到打包时包的体积过大导致加载速度的延迟，我们通过CDN和懒加载两种方式进行改善，前者就将我们的项目上线后还需要引用的大量依赖包，转换为CDN节点的引用，从而改善了包的体积，但是加载还是很慢，所以使用后者路由懒加载，将模块进行拆分，每个个体的体积很小，众多模块有序加载，用到哪些模块就优先加载哪些，最后在通过服务器采用一定的压缩算法，对文件体积进行压缩后，再发送给客户端，进而有效的改善了包的体积，以及加载速度.

我们常在开发环境下的console ，这个时候线上优化对console的清除就很有必要了。那么就简单说一下步骤。

第一步安装插件

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

第二步配置babel.config文件

const proPlugin = []
if (process.env.NODE_DEV == "production") {
   proPlugin.push("transform-remove-console");
}
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
plugins: [...proPlugin, '@babel/plugin-syntax-dynamic-import']
}

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

ElementUI组件按需加载

1.创建两个入口文件：

一个用于开发环境的打包 main-dev.js
一个用于项目上线的打包 main-prod.js

可以看到我们项目的大小，依赖项里的第一个项element-ui 就占了一半的大小。所以我们使用CDN对element-ui进行按需加载就很有必要了。

1. 在main-prod.js中，注释掉element-ui按需加载的代码。通常我们都是进行的全局引入，这样明显会更大。

在public文件夹下的index.html 的头部区域中，通过CDN加载element-ui的js和css样式

最重要的别忘记了修改打包入口文件

vue.config.js文件，用来修改webpack的配置项

configureWebpack和chainWebpack，来自定义webpack的打包配置

configureWebpack和chainWebpack的作用完全相同

configureWebpack：通过操作对象的形式来修改入口文件
chainWebpack：通过链式编程的形式来修改入口文件

当然也可以修改index.html文件设置变量 isProd 在开发环境下，通过import来引入依赖。在生产环境下，不使用import引入依赖，而是通过cdn来引入各种依赖，这样可以减小打包后的依赖体积。

通过isProd区分开发环境和生产环境。如果是生产环境，则加载CDN。如果是开发环境，则不接在CDN文件。

第三方依赖启用CDN

CDN链接

路由懒加载

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

三步：

安装 @babel/plugin-syntax-dynamic-import包
在babel.config.js配置文件中声明该插件

3.将路由改为按需加载的形式，示例代码如下

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

Vue项目线上优化