## Vue 項目的編譯打包 使用Vue Cli創建的項目， 在正式環境時需要使用webpack編譯打包，編譯的命令是： ``` npm run build ``` 以上命令做的事情是把很多js源碼文件中的注釋去掉， 匯整到一份文件中， 這樣的好處是總體需要傳輸的文件變小了。 打包后的路徑是： dist\js 。 文件名是 app_[一段Hash字符串].js。 ## 問題導入 在使用Router的項目中, router/index.js 路由中一般會導入多個 .vue 組件， 類似： ``` import VuexDemo from '../views/VuexDemo.vue' ``` 當一個應用中的組件很多時， 會導致打包后的 app.xxx.js 這個文件很大，多的甚至達到幾十兆，這樣導致的問題是： 首頁的加載會很慢，雖然后面很快，但是用戶一般是等不及進首頁就要抱怨了。 而且在很多應用中， 不同的頁面關注的功能不同， 有點頁面壓根不會進去， 這樣一次性把所有內容傳遞過來就顯得浪費了。 ## 解決方法 解決的方案是： 分模塊打包。 這里有一個名詞：chunk , 塊，文件束。 實現方式是使用webpack 的require.ensure 方法實現按需加載。 語法如下： ``` require.ensure(dependencies: String[], callback: function(require), chunkName: String) ``` * dependencies， 依賴，需要用到的組件 * callback， 回調 ， 所有依賴加載完，執行這個回調函數。可以為null * chunkName, 分塊的名字 ## 原理 webpack 會創建一個 `<script>`標簽加到 document.head 對象中。 ## Vue 路由懶加載 結合Vue的異步組件和Webpack 的代碼分隔功能，實現路由組件的懶加載。 1. 異步組件 ``` new Vue({ // ... components: { 'my-component': () => import('./my-async-component') } }) ``` ``` const Foo = () => Promise.resolve({ /* 組件定義對象 */ }) ``` 2. 動帶import ``` import('./Foo.vue') // 返回 Promise ``` 結合以上兩點， 定義一個能夠被Webpack自動代碼分隔的異步組件的方式是： ``` const Foo = () => import('./Foo.vue') ```