三、webpack優(yōu)化之第三方庫使用 CDN 加載(vue)

本文主要介紹對(duì)第三方庫（如echarts咕缎、element-ui等）的打包優(yōu)化珠十。
采用cdn加載需要聯(lián)網(wǎng)。

一凭豪、打包分析

1.1 速度分析

使用speed-measure-webpack-plugin插件可以讓我們知道各個(gè)模塊的耗時(shí)情況和打包總耗時(shí)

1.1.1 安裝

npm i -D speed-measure-webpack-plugin

1.1.2 vue.config.js配置

// 導(dǎo)入速度分析插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
// 實(shí)例化插件
const smp = new SpeedMeasurePlugin();
module.exports = {
    configureWebpack: smp.wrap({
        plugins: [
            // 你使用到的其他插件
        ]
    })
}

1.1.3 結(jié)果

打包總耗時(shí)為 25.4secs

圖1-1

項(xiàng)目啟動(dòng)時(shí)焙蹭，也可以看到啟動(dòng)耗時(shí)

圖1-2

1.2 體積分析

webpack打包體積分析這里沒有用額外的插件，就使用了webpack自帶的嫂伞。

圖1-3

1.2.1 package.json配置

在 package.json中添加一條命令：

"http://": "在/dist/report.html中查看webpack打包報(bào)告",
 "report": "vue-cli-service build --report",

1.2.2 結(jié)果

執(zhí)行npm run report孔厉，生成的體積報(bào)告在/dist/report.html中

圖1-4

由此可見，第三方庫占比最大帖努，因此采用CDN加載撰豺。

二、第三方庫使用 CDN 加載

為了方便以后管理拼余，將CDN相關(guān)的所有配置寫入cdn.config.js(與vue.config.js同級(jí))

2.1 cdn.config.js配置

module.exports = {
  // 是否使用cdn
  useCDN: true,
  // key是'包名', value是靜態(tài)資源引入后全局的名稱 import Vue from 'vue'
  externals: {
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter',
    'axios': 'axios',
    'echarts': 'echarts',
    // 必須是ELEMENT污桦，否則會(huì)報(bào)‘elementUI is not defined’
    'element-ui': 'ELEMENT'
  },
  CDN: {
    // CDN鏈接地址：https://www.jsdelivr.com/
    css: [
      'https://cdn.jsdelivr.net/npm/element-ui@2.15.3/lib/theme-chalk/index.css'
    ],
    js: [
      'https://cdn.jsdelivr.net/npm/vue@2.6.11',
      'https://cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js',
      'https://cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js',
      'https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js',
      'https://cdn.jsdelivr.net/npm/element-ui@2.15.3/lib/element-ui.common.min.js',
      'https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js'
    ]
  }
}

2.2 vue.config.js配置

const isPRD = process.env.NODE_ENV === 'production';
// cdn相關(guān)配置
const cdnConfig = require('./cdn.config.js');

module.exports = {
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板來源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'index.html',
      // 當(dāng)使用 title 選項(xiàng)時(shí)，
      // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: '系統(tǒng)名稱',
      // 在這個(gè)頁面中包含的塊匙监，默認(rèn)情況下會(huì)包含
      // 提取出來的通用 chunk 和 vendor chunk凡橱。
      chunks: ['chunk-vendors', 'chunk-common', 'index'],
      // 調(diào)用：htmlWebpackPlugin.options.CDN（設(shè)置CDN鏈接）
      CDN: isPRD && cdnConfig.useCDN ? cdnConfig.CDN : null
    }
  },
  configureWebpack: {
    // 生產(chǎn)環(huán)境注入CDN
    externals: isPRD && cdnConfig.useCDN ? cdnConfig.externals : {}
  }
}

2.3 index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>

    <!-- 使用 CDN 的 CSS 文件 start -->
    <% for (var i in htmlWebpackPlugin.options.CDN && htmlWebpackPlugin.options.CDN.css) { %>
      <link href="<%= htmlWebpackPlugin.options.CDN.css[i] %>" rel="stylesheet">
    <% } %>
    <!-- 使用 CDN 的 CSS 文件 end -->

    <!-- 使用 CDN 的 JS 文件 -->
    <% for (var i in htmlWebpackPlugin.options.CDN && htmlWebpackPlugin.options.CDN.js) { %>
      <script src="<%= htmlWebpackPlugin.options.CDN.js[i] %>"></script>
    <% } %>
    <!-- 使用 CDN 的 JS 文件 end -->
  </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>
</html>

2.4 main.js修改

index.html已經(jīng)引入了element.ui的css小作，所以這里不需要重復(fù)引入

// 引入element-ui組件庫
import ElementUI from 'element-ui';
// index.html已經(jīng)引入了element.ui的css，所以這里不需要重復(fù)引入
// import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2.5 結(jié)果

由圖2-1可知稼钩，采用了cdn加載后打包總耗時(shí)由原來的25.4secs變?yōu)?code>14.75secs

圖2-1

由圖2-2可知顾稀，采用了cdn加載后打包體積也變小了

圖2-2

圖2-3

由圖2-4可知，使用cdn加載的第三方庫沒有進(jìn)行打包

圖2-4

2.6 可能遇到的問題

圖2-5的錯(cuò)誤是cdn引用的element.ui鏈接問題：需要引入lib/index.js文件(列如https://cdn.jsdelivr.net/npm/element-ui@2.15.3/lib/index.js)

圖2-5
圖2-6的錯(cuò)誤是externals外部擴(kuò)展的value值不對(duì)坝撑，應(yīng)為'element-ui': 'ELEMENT'

圖2-6

三蛛砰、webpack優(yōu)化之第三方庫使用 CDN 加載(vue)