VUE打包優化

blacker2018發表於2018-07-02
Vue優化

經過2小時努力，將打包後的vendor由1.44M優化至50k。方法是打包 vender 時不打包 vue、element-ui、echarts 等，換用國內的 bootcdn 直接引入到根目錄的 index.html 中。

首先在根目錄引入CDN

注意要在 </body> 前引入，否則會報錯。

/* ./index.html */
<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->   
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
</body> 
複製程式碼

接著配置 webpack

在 webpack 裡有個 externals，可以忽略不需要打包的庫。key 參考 package.json , value 是你引入的別名。

/* ./build/webpack.base.conf.js */

externals: {
    'vue': 'Vue',
    'vue-router': 'VueRouter',
    'element-ui': 'ElementUI',
    'echarts': 'Echarts',
}
複製程式碼

到這裡應該就 OK 了 但是我遇到了報錯

element is not defined
複製程式碼

main.js 中註釋掉就好了

// import ElementUI from 'element-ui'
複製程式碼

對比圖片，優化前：

優化前
優化後：
優化後

2018-4-17 補充

今天想 vue 和 vue-router 檔案不是很大，還是一起打包的好，能少兩次請求，於是： index.html :

<!-- <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> -->
<!-- <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> -->
<script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.0.4/echarts.min.js"></script>
複製程式碼

webpack.base.conf.js :

externals: {
    // 'vue': 'Vue',
    // 'vue-router': 'VueRouter',
    'element-ui': 'ElementUI',
    'echarts': 'Echarts',
}
複製程式碼

結果報錯：

element is not defined
複製程式碼

原因是 element 依賴 vue ，需要在 vue 之後引入，而如果在其之後引入，又會報元件未註冊的錯誤，因此 vue 和 element 必須同時使用CDN，而且 element 需在 vue 之後引入。

參考地址

相關文章