## 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') ```