（1）排除 和 解決編譯打包中的 警告和 錯(cuò)誤

（2）在生產(chǎn)環(huán)境中 清除 console.log()

• 使用 babel-plugin-transform-remove-console 插件 清除

• 安裝開發(fā)依賴：

  
  
  2020-05-05_192002.png
• 在 babel.config.js 文件中添加配置

// 這是項(xiàng)目發(fā)布階段需要用到的babel 插件
const prodPlugins = []
// 判斷編譯模式，如果時(shí)在production 也就是生產(chǎn)模式，就向prodPlugin這個(gè)數(shù)組中添加 transform-remove-console
// 如果不是 production 就添加的一個(gè)空數(shù)組糕珊， 然后將prodPlugins 在plugins中展開
if(ProcessingInstruction.env.NODE_ENV === 'production'){
  prodPlugins.push('transform-remove-console')
}


module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    // 發(fā)布產(chǎn)品時(shí)的 插件數(shù)組
    ...prodPlugins
  ]
}

（3） 生成打包報(bào)告

• 第一種方法：通過命令行參數(shù)的形式生成報(bào)告
  // 通過 vue-cli 的命令選項(xiàng)可以生成打包報(bào)告
  // --report 選項(xiàng)可以生成 report.html 以幫助分析包內(nèi)容
  vue-cli-service build --report

• 第二種方式： 通過可視化的ui 面板直接查看報(bào)告（推薦）
  在可視化的ui 面板種，通過控制臺(tái)和分析面板假消，可以方便的看到項(xiàng)目中所存在的問題。

  
  
  2020-05-05_201954.png

2020-05-05_202410.png

（4）通過 vue.config.js 修改webpack 的默認(rèn)配置

通過vue-cli 3.0 工具生成的項(xiàng)目岭接，默認(rèn)隱藏了所有webpack 的配置項(xiàng)富拗，目的時(shí)為了屏蔽項(xiàng)目的配置過程臼予，讓程序員把重心放到具體功能和業(yè)務(wù)邏輯的實(shí)現(xiàn)上。

如果有要修改webpack 默認(rèn)配置的需求啃沪，可在項(xiàng)目根目錄種粘拾，按需創(chuàng)建 vue.config.js 這個(gè)配置文件，從而對(duì)項(xiàng)目的打包發(fā)布過程做自定義的配置（具體配置參考 https://cli.vuejs.org/zh/config/#vue-config-js）

// 在項(xiàng)目根目錄創(chuàng)建 vue.config.js文件
// 在這個(gè)文件種创千，應(yīng)該導(dǎo)出一個(gè)包含了自定義配置選項(xiàng)的對(duì)象
modulu.exports = {
  // 選項(xiàng)...m
}

（5） 為開發(fā)模式與發(fā)布模式指定不同的打包入口

默認(rèn)情況下缰雇，Vue項(xiàng)目的開發(fā)模式和發(fā)布模式，共用同一個(gè)打包的入口文件（即src/main.js）追驴。為了將項(xiàng)目的開發(fā)過程與發(fā)布過程分離械哟，我們可以為兩種模式，各自指定打包的入口文件殿雪，即：

• 開發(fā)模式入口文件為： src/main-dev.js
• 發(fā)布模式入口文件為： src/main-prod.js
  修改打包入口文件有兩種方式暇咆，1.chainWebpack 通過鏈?zhǔn)骄幊痰男问剑瑏硇薷?webpack 配置丙曙；2. configureWebpack 通過操作對(duì)象的形式爸业，來修改默認(rèn)的webpack配置
  兩者具體使用差異，可以參考 https://cli.vuejs.org/zh/guide/webpack.html#webpack-%E7%9B%B8%E5%85%B3

// 在 vue.config.js 文件中通過 chainWebpack 修改打包入口配置
// 同時(shí)在 src 目錄下亏镰，將一個(gè)main.js文件扯旷，
// 復(fù)制成兩個(gè)main-prod.js  和main-dev.js 兩個(gè)入口文件
modulu.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 === 'production', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

（6）通過 externals 加載外部CDN 資源

默認(rèn)情況下，通過import 語(yǔ)法導(dǎo)入的第三方易拉寶拆挥，最終會(huì)被打包合并到同一個(gè)文件中薄霜，從而導(dǎo)致打包成功后某抓，單文件體積過大的問題纸兔。

為了解決上述問題，可以通過webpack 的 externals 節(jié)點(diǎn)否副，來配置并加載外部的 CDN 資源汉矿。 凡是聲明在 externals 中的第三方依賴包都不會(huì)被打包。

• 第一步：先將依賴包添加到 externals 節(jié)點(diǎn)下
  同樣在vue.config.js 中進(jìn)行配置

modulu.exports = {
  chainWebpack: config => {
    // 發(fā)布模式 
    // 只有在發(fā)布模式下备禀，才需要將第三方依賴包配置到 externals 節(jié)點(diǎn)下
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        // 把使用到的第三方依賴包 添加進(jìn)來洲拇，然后進(jìn)行第二步
      })
    })

    // 開發(fā)模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

• 第二步：需要在public/index.html文件的頭部，添加使用到的第三方依賴包的css樣式表和js文件引用曲尸， 的CDN 資源的引用

// 在 public/index.html 中 引入 CDN鏈接的 js文件和css文件
// 引入之前赋续，需要在發(fā)布入口文件 main-prod.js 文件中刪除 import 導(dǎo)入的資源文件
<link rel="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css">

<script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js">
// 

• 然后在將Element-UI 也通過CDN 導(dǎo)入

// 在 生產(chǎn)打包入口文件 main-prod.js中 刪除或注釋掉element-ui按需加載的代碼 import './plugins/element.js'
// 然后在public/index.html 文件中引入element-ui的js文件和css樣式表
<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫(kù) -->
<script src="https://unpkg.com/element-ui@2.13.1/lib/index.js"></script>

注意：使用CDN導(dǎo)入資源文件時(shí)，應(yīng)盡量固定版本導(dǎo)入另患，以免以后版本更新后出現(xiàn)不兼容

(7) 首頁(yè)內(nèi)容定制

• 第一步在 vue.config.js文件中增加如下代碼
  
  2020-05-06_000328.png

 // 在 vue.config.js 文件中
modulu.exports = {
  chainWebpack: config => {
    // 發(fā)布模式 
    // 只有在發(fā)布模式下纽乱，才需要將第三方依賴包配置到 externals 節(jié)點(diǎn)下
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-prod.js')
      config.set('externals', {
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        // 把使用到的第三方依賴包 添加進(jìn)來，然后進(jìn)行第二步
      })
      // 定義一個(gè)isProd 變量昆箕，當(dāng)它為 true 時(shí)鸦列，index.htm 中就會(huì)添加cdn 引用的資源文件
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    })

    // 開發(fā)模式
    config.when(process.env.NODE_ENV === 'production', config => {
      config.entry('app').clear().add('./src/main-dev.js')
      
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }
}

• 第二步在 public/index.html 文件中使用三目運(yùn)算判斷是否需要 加載cdn 資源文件

// 自定制title 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>電商管理系統(tǒng)</title>

    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- 引入樣式 -->
    <link rel="stylesheet" >
    <!-- 引入組件庫(kù) -->
    <script src="https://unpkg.com/element-ui@2.13.1/lib/index.js"></script>

    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <% } %>

  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>

(8) 路由懶加載

當(dāng)打包構(gòu)建項(xiàng)目時(shí)租冠，JavaScript包會(huì)變得非常打，影響頁(yè)面加載薯嗤。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊顽爹，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)的組件，這樣就更高效了骆姐。
具體需要3步：

• 安裝 @babel/plugin-syntax-dynamic-import 包镜粤。

  
  
  2020-05-06_011931.png

• 在 babel.config.js 配置文件中聲明該插件。

  
  
  2020-05-06_012313.png

• 在路由配置文件中將路由改為按需加載的形式玻褪，示例代碼如下：
  const Foo = () => import (/* webpackChunkName: "group-foo" */ './Foo.vue')
  ----------【webpackChunkName: "group-foo" 】給組件分組命名
  具體配置參考：https://router.vuejs.org/zh/guide/advanced/lazy-loading.html
  

  2020-05-06_011201.png