## 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 会创建一个 `
## 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')
```