vue 版本：3.0

@vue/cli 版本：5.0

專案優化整體策略

1. 生成打包報告
2. 第三方庫啟用CDN
3. ui 元件按需載入
4. 路由懶載入
5. 首屏內容定製

具體實施

裝置適配

　　淘寶的適配方案 （推薦使用）

　　1，安裝依賴包

npm i lib-flexible -S   
npm i postcss-px2rem -S  

yarn add lib-flexible -S  
yarn add  postcss-px2rem -S  

　　2，在入口檔案（main.js）中引入

import 'lib-flexible'

　　3，在vue.config.js 檔案中配置 css 屬性

module.exports = {
    pluginOptions:{
        css: {
            loaderOptions: {
                css: {},
                postcss: {
                    plugins: [
                        require('postcss-px2rem')({
                            remUnit: 37.5
                        })
                    ]
                }
            }
        }
    }
}
 

專案新增 nprogress 進度條

　　1，安裝依賴包

  npm i nprogress -S 
  yarn add nprogress -S 

　　2，在入口檔案中匯入包和樣式

  import NProgress from 'nprogress' 
  import 'nprogress/nprogress.css'

　　3，在axios請求攔截器和響應攔截器中配置啟動和結束

// axios 請求攔截
axios.interceptors.request.use(function (config) {
  NProgress.start()
  return config
})

 
// axios 響應攔截
axios.interceptors.response.use(function (response) {
  NProgress.done()
  return response
})

生成打包報告

　　1，直接在命令列新增引數

  vue-cli-service build --report

　　2，通過視覺化的 ui 面板檢視報告（推薦）

　　在視覺化的ui面板中，通過控制檯和分析面板， 可以方便的檢視存在的問題

vue ui

為開發模式和釋出模式設定不同的打包入口

　　1，配置開發入口檔案 src/main-dev.js 和釋出模式入口檔案 src/main-prod.js

　　2，通過 configureWebpack 或者 chainWebpack 來修改預設的配置

　　　　 configureWebpack 通過物件形式操作

　　　　 chainWebpack 通過鏈式形式操作

　　3，在 vue.config.js 檔案中通過 chainWebpack 修改入口檔案

module.exports = {
  chainWebpack: config => {
    // 釋出模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')
    })
    // 開發模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')
    })
  }
}

通過 externals載入外部 CDN 資源

　　1，配置 vue.config.js

  chainWebpack: config => {
    // 釋出模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')
      config
        .set('externals', {
             vant: 'vant',
          vue: 'Vue',
          'vue-router': 'VueRouter',
          axios: 'axios',
          nprogress: 'NProgress',
          moment: 'moment'
        })
    })
    // 開發模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')
    })
  }

　　2，在 index.html 檔案中引入 CDN服務依賴檔案（連結有些可能會失效）

 <!-- nprogress 的樣式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
  <!-- vant 的樣式表文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css">

  <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <!-- nprogress 的 js 檔案 -->
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  <!-- moment 的 js 檔案 -->
  <script src="https://cdn.staticfile.org/moment.js/2.24.0/moment.min.js"></script>
  <!-- vant 的 js 檔案 -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>

  ps: vant ui  引入CDN檔案之後，可以直接去掉 按需引入

首頁內容定製

　　1，配置 vue.config.js

  chainWebpack: config => {
    // 釋出模式
    config.when(process.env.NODE_ENV === 'production', config => {
      // 配置入口檔案
      config
        .entry('app')
        .clear()
        .add('./src/main-prod.js')
      // 配置CDN
      config
        .set('externals', {
            vant: 'vant'
          vue: 'Vue',
          'vue-router': 'VueRouter',
          axios: 'axios',
          nprogress: 'NProgress',
          moment: 'moment'
        })
      // 配置首頁定製
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })
    // 開發模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config
        .entry('app')
        .clear()
        .add('./src/main-dev.js')
      // 配置首頁定製
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }

　　2，在 index.html 中通過流程控制，是否載入CDN資源

  <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>mall-vue</title>
  <% if(htmlWebpackPlugin.options.isProd){ %>
  <title>vue-ssr</title>
  <!-- nprogress 的樣式表文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />

  <!-- vant 的樣式表文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css">

  <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <!-- nprogress 的 js 檔案 -->
  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
  <!-- moment 的 js 檔案 -->
  <script src="https://cdn.staticfile.org/moment.js/2.24.0/moment.min.js"></script>
  <!-- vant 的 js 檔案 -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>
  <%}%>

實現路由懶載入

　　1，安裝依賴包

npm i @babel/plugin-syntax-dynamic-import -D 
yarn add @babel/plugin-syntax-dynamic-import -D 

　　2，配置 babel.config.js

  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]

　　3，按需載入路由元件

const About = () => import(/* webpackChunkName: "about" */ './views/About.vue')