通常我們使用vue-cli開發多頁面的時候，不知道您是否注意乙個問題沒有？
預設情況：webpack 會將多入口通用的元件庫等，打包乙個 vendor 的 chunk js 中
現在假設有兩個頁面：
入口 admin 使用到了那麼這樣就會存在問題：element-ui元件庫和echarts圖表庫，入口 index 使用了iview的元件庫」
打出來的chunk-vendor.***x.js會包含element-ui和echarts和iview元件庫，所以 js 體積會非常大
chunk-vendor.***x.js預設是所有node_modules下面的庫集合
index 入口只是使用了 iview，由於需要載入chunk-vendor.***x.js，所以造成了不必要的載入
admin 入口 同上 會額外引入 iview
那麼針對以上的問題，我們預期應該是怎樣的呢？
index 入口和 admin 各自單獨打包，按需引入各自的庫
index 和 admin 公用的庫 只打包一次
針對以上的需求，我探索出了一下兩種方案：
刪除預設 splitchunk 配置，打公共 chunks,單獨分離各自的 ui 庫（做減法）
刪除預設 splitchunk 配置，抽離公共資源（做加法）
方案 1：刪除預設 splitchunk 配置，打公共 chunks,單獨分離各自的 ui 庫」
刪除預設 splitchunk 配置是了取消 webpack 的預設配置，因為 webpack 預設的配置是將node_modules下的所用到的庫打包成乙個chunk-vendor.***x.js。
主要分成三步：
詳細配置如下:
let pages = ,
admin:
};module.exports = ,
chainwebpack: config =>
},configurewebpack: config => ,
// 抽離node_modules下的庫為乙個chunk
vendors: ,
// 由於index入口使用了iview,所以講iview單獨處理出來，這樣admin入口就不會使用此js
iview: ,
// 由於admin入口使用了element-ui,所以講element-ui單獨處理出來，這樣index入口就不會使用此js
element: ,
// 由於admin入口使用了echarts,所以講echarts單獨處理出來，這樣index入口就不會使用此js
echarts: ,
// 由於echarts使用了zrender庫，那麼需要將其抽離出來，這樣就不會放在公共的chunk中
zrender: }}
};}};
webpack如果是多入口的話，刪除預設的 splitchunk 配置，多入口會單獨各自打包，但是公共資源不會抽取。
針對以上的情況我們可以通過以下三步達到優化目的：
詳細配置如下
const bundleanalyzerplugin = require("webpack-bundle-analyzer")
.bundleanalyzerplugin;
let pages = ,
admin:
};module.exports = ,
chainwebpack: config => ,
configurewebpack: config => }}
};}};
優點：不需要處理公共 chunk,單獨分離各自的 chunk 缺點：如果多入口使用的庫比較多，需要各自單獨的抽離
適用場景
適用於：多個入口頁面耦合性比較強的(也就是多入口使用的公共資源比較多的)，只有少量元件庫不同
刪除預設 splitchunk 配置，抽離公共資源（做加法）
優點：不需要單獨分離各自的 chunk，只需要處理公共 chunk 即可 缺點：如果多入口公共庫使用的比較多，抽離需要更加細緻化
適用場景
適用於：多個入口頁面耦合性比較低的（也就是多入口使用的公共資源比較少，通常是多個入口沒有任何關係的）
ES6引入iterable型別
遍歷array可以採用下標迴圈，遍歷map和set就無法使用下標。為了統一集合型別，es6標準引入了新的iterable型別，array map和set都屬於iterable型別。具有iterable型別的集合可以通過新的for of迴圈來遍歷。for of迴圈是es6引入的新的語法，請測試你的瀏覽...
VUE3 0引入vant元件庫
目前vant 3 是基於 vue 3 開發的，在使用 vant 3 前，請將專案中的 vue 公升級到 3.0 以上版本。通過 npm 安裝 在現有專案中使用 vant 時，可以通過npm或yarn安裝 通過 npm 安裝npm i vant next s通過 yarn 安裝yarn add van...
vue系列之vue cli 3引入ts
vue class component 強化 vue 元件，使用 typescript 裝飾器 增強 vue 元件 vue property decorator 在 vue class component 上增強更多的結合 vue 特性的裝飾器 vuex class 基於vue class comp...