bootcdn官網
專案開發完成後，使用webpack打包的檔案都比較大，所以我就想使用什麼辦法來優化一下。
本文主要是講解在 vue-cli 中如何利用cdn實現打包檔案體積優化問題。
new
webpack.optimize.commonschunkplugin(}
)
vendor檔案中存放的都是被依賴的模組。具體指什麼呢？就是類似於引入了第三方庫、vuex、vue-router、axios等，在打包後都會被放進去。所以這個檔案才會這麼大。
那麼如何實現打包的時候，不讓這些都打包呢。那就要使用bootcdn直接將這些要引入的模組全都。放在根目錄的index.html檔案裡。
具體步驟如下：
找到根目錄下的index.html檔案，新增如下圖所示。
新增externals屬性
如果是vue-cli 2，在專案的build/webpack.base.conf.js中，在下面合適位置新增externals相關語句，在entry後面加入即可：
// 利用webpack的externals，把第三方庫的js檔案從打包檔案裡去掉
externals:
vue-cli 3，在專案根目錄的vue.config.js中，將configurewebpack配置**塊新增進入即可：
module.exports =
}}
在專案的 src/main.js 中，注釋掉以下語句：
// import vue from 'vue'
// import elementui from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
vue.config.productiontip =
false
// vue.use(elementui)
// import axios from 'axios'
const axios =
require
('axios'
)
// import router from 'vue-router'
// vue.use(router)
const router =
require
('vue-router'
)
但是，如果是按需匯入的話，還要將按需匯入的配置去掉，因為引入cdn後就不存在按需匯入了，這個坑一定要避免！！！
最後再次打包後的檔案如下。
webpack系列二 webpack打包優化探索
雖然webpack的已經公升級到了webpack4，而我們目前還在使用webpack3，但其中的優化點都大同小異，公升級後同樣適用。這三條原則永遠是一切優化的前提 1 主要配置 2plugins 3 new webpack.optimize.moduleconcatenationplugin 4 1...
webpack 概念的引入
在網頁中會引用哪些常見的靜態資源？js js jsx coffee ts typescript 類 c 語言 字型檔案 fonts svg ttf eot woff woff2 模板檔案 ejs jade vue 這是在webpack中定義元件的方式，推薦這麼用 網頁中引入的靜態資源多了以後有什麼問...
webpack學習鏈結
1.webpack 3 零基礎入門教程 1 2.webpack 3 零基礎入門教程 2 安裝 3.webpack 3 零基礎入門教程 3 實現 hello world 4.webpack 3 零基礎入門教程 4 webpack 的配置檔案 webpack.config.js 5.webpack 3 ...