鍍金池/ 問答/HTML/ vue 多個【路由組件】引用同一個第三方庫問題

vue 多個【路由組件】引用同一個第三方庫問題

vue-cli 生成的項目使用了路由懶加載；
項目中的路由比較多，而有些路由之間互相并不會跳轉(zhuǎn)，用戶可能只在某個路由下操作，

在多個路由組件引入同一個第三方庫(如echarts等)的時候，如何將這個第三方庫提取出來？

目前情況是vue-cli會將echarts或者其他庫打包很多份（每個依賴于echarts的路由組件里都有個echarts）
如下圖所示，路由1、路由2 引入了echarts，兩個路由組件各自打包了一份echart，路由3未引入。
圖片描述

實現(xiàn)效果為：

  1. 在進入某個路由后，如果這個路由組件依賴了echarts才加載echarts庫。
  2. 如果這個路由并沒有依賴這個庫，就不加載。
  3. 而多個路由組件同時依賴這個庫(在依賴了同一個庫的路由之間跳轉(zhuǎn))，則只需要加載一次。
  4. 不使用webpack.DllPlugin因為dll需要在頁面使用script標(biāo)簽引入，并不能達到按需加載的目的。
回答
編輯回答
櫻花霓

commonchunks

2017年8月21日 05:00
編輯回答
大濕胸

多方引用，打包的時候不會打包多份，只會在bundle里面打包一份echarts代碼，引用的文件那里只是一個引用代碼。
用require.ensure，在進入那個頁面的時候再動態(tài)引入echarts，已經(jīng)引入過的文件只會走304。

require.ensure([], function () {
    require("echarts");
    // 所有關(guān)于echarts的代碼都在這后面
});
2018年7月29日 03:46