上線項目的優化

優化上線項目，首先在上線打包時我們通過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')

重新打包效果可見