上线项目的优化

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

在使用 npm run build 打包时移除console

初衷：

随着项目功能的不断完善代码的累积项目中的庞大代码数量造成我们打包时的长时间等待尤其是我们在开发阶段留下的过多的测试代码例如最常见不过的console 消耗我们的时间并且占有一定的内存

优化：

使用 babel中的一个插件，因为webpack 打包时会使用 babel 进行代码降级，所以babel 插件可以在打包过程中将 console 移除

安装插件：

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

配置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文件不管是打包还是开发阶段使用的都是这一文件
在卡法阶段我们可能调用一端口返回假数据为调试我们的代码但是在上线后我们需要用正式接口可能不止一个但是我们左右手动更改较为麻烦且容易出错
在这里插入图片描述

优化：

创建两个入口文件：

一个用于开发环境的打包 dev_env.js
一个用于项目上线的打包 prod_env.js

配置打包的入口文件

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 中加入如下引用

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.core.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.snow.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.bubble.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/theme-chalk/index.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
<script type="text/javascript"src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.1/lib/index.js"></script>

最后在 vue.config.js 中添加配置

打包后包的体积明显减小

路由懒加载

初衷：

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

优化：

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

安装插件

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

修改babel配置文件
修改 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')

重新打包效果可见