## 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')
```
- 引入篇
- 基礎篇
- 快速入手
- 名詞解釋
- Vue語法
- Vue安裝
- Vue實例
- 模板語法
- 計算屬性和偵聽器
- Class與Style綁定
- 條件渲染
- 列表渲染
- 事件處理
- 表單輸入綁定
- 組件基礎
- 進階篇
- 常用模塊
- 單文件組件
- 快速學會Vue Router路由
- Vue Route 進階使用
- Vuex 與狀態管理
- Axios
- Mock.js
- data數據顯示在頁面
- Vue生命周期
- Vue按需加載組件
- 國際化
- 頁面加載進度條 -NProgress
- 自定義主題顏色
- 開發篇
- Vue入門——創建并運行一個Vue項目
- Vue + Element UI 項目創建
- 使用Vue ui項目創建工具在網頁中創建Vue項目
- Vue項目創建入門實例
- Vue CLI
- 創建項目
- 使用Visual Studio Code 開發Vue項目
- 高級篇
- 組件深入
- Vue+Element
- Vue + ElementUI 主題顏色切換
- 工具篇
- 在線代碼編輯器
- 開發工具(IDE,集成開發環境)
- npm(JavaScript包管理工具)介紹
- Node.js(npm)在Windows下安裝
- webpack介紹
- webpack快速實例
- webpack
- 快速入門實例
- 安裝
- 概念
- Nodejs
- 基礎
- npm
- 命令參考
- 命令
- 模塊安裝
- Babel
- 問題解決篇
- ERROR Failed to get response from https://registry.yarnpkg.com/vue-cli-version -marker
- Vue常見問題
- You are using the runtime-only build of Vue where the template compiler is not
- yarn 報unable to get local issuer certificate
- yarn There appears to be trouble with your network connection. Retrying
- Expected Boolean, got String with value "true".
- 項目篇
- 項目創建
- 項目設計
- 頁面
- 開發問題
- 后端
- Spring Boot + Activiti 工作流框架搭建之一
- Spring Boot + Activiti 工作流框架搭建之二
- 工作流
- Java流程框架
- Activiti
- 頁面風格
- green
- blue
- orange
- 參考篇
- 好的Git項目
- Vue的在線js
- 指令
- 開發說明
- JavaScript 高級
- export和import
- JS模塊化規范對比以及在Node.js的實現
- Storage
- ES2015
- scss
- CSS、Sass、SCSS