Webpack如何引入CDN連接來優化編譯後的體積

時間 2019-12-02

原文原文鏈接

背景

在 Vue 項目中，引入到工程中的全部 js 文件，編譯時都會被打包進 vendor.js，也就致使了 vendor.js 文件體積變得至關臃腫，必定程度上影響着頁面的渲染。爲了減小編譯後的體積，提升頁面渲染速度，咱們能夠經過引入 CDN 連接把庫分離，多線程異步 js 庫，從而達到加速渲染的目的。那麼咱們如何作呢？
css

步驟

1.引入CDN連接

在項目的 index.html 中，常規方式引入 CDN 連接，此處以 vue 和 element-ui 爲例：
html

<body>
  <div id="app"></div>
  <!-- CDN方式引入vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- CDN方式引入element-ui -->
  <script src="https://unpkg.com/element-ui@2.8.2/lib/index.js"></script>
</body>
複製代碼

2.添加externals屬性

Vue-cli 2
vue

在項目的 build/webpack.base.conf.js 中，在下面合適位置添加 externals 相關語句，在 entry 後面加入便可：
webpack

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    function: './src/main.js'
  },
  externals:{
    'vue': 'Vue',
    'element-ui': 'ElementUI'
  }
  ...
}複製代碼

Vue-cli 3
web

在項目根目錄的 vue.config.js 中，將 configureWebpack 配置代碼塊添加進入便可：
npm

module.exports = {
  configureWebpack:{
    externals: {
      'vue': 'Vue',
      'element-ui': 'ElementUI'
    }
  }
}複製代碼

注意：在上述代碼中，'vue': 'Vue' 對應形式爲 key : value，其中 key 爲項目中引用的名稱，而 value 是資源自己定義的名稱（不可改），正常狀況下咱們能夠參照 src/main.js 進行查看：
element-ui

import Vue from 'vue'
import ElementUI from 'element-ui'
//打開src/main.js查閱以上兩行代碼，其前面做爲value，後面做爲key。複製代碼

3.註釋import及Vue.use(xxx)

在項目的 src/main.js 中，註釋掉如下語句：
bash

// import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
import App from './App'

Vue.config.productionTip = false

// Vue.use(ElementUI)複製代碼

注：使用 eslint 規則的項目請不要註釋 import 及 Vue.use，除非你不使用那煩人的 eslint。多線程

完成以上步驟後就能夠開始執行 npm run build，你會發現編譯後的 vendor.js 從幾百K降到幾十K，也就意味着優化體積已經成效。另外，有好多網友先前爲了減小體積就已經配置了按需引入，若是引入 CDN 以後，記得把按需引入的配置去掉哦，由於引入 CDN 以後就不存在按需引入這種說法啦！app