vue 如何合并两个 项目_Vue.js中用webpack合并打包多个组件并实现按需加载

前言

随着移动设备的升级、网络速度的提高，用户对于web应用的要求越来越高，web应用要提供的功能越来越。功能的增加导致的最直观的后果就是资源文件越来越大。为了维护越来越庞大的客户端代码，提出了模块化的概念来组织代码。webpack作为一种模块化打包工具，随着react的流行也越来越流行。

使用 Vue 开发项目时，如果要使用其单文件组件特性，必然要使用 webpack 或者 browserify 进行打包，对于大型应用，为了提升加载速度，可以使用 webpack 的 code split 功能进行分割打包，生成较小的模块并按需加载，这在 Vue 文档及 vue-router 文档中均有介绍：、。

webpack 的 code split 可以使用 webpack 的 require.ensure 特殊语法或者使用 AMD 风格的 callback-require 语法，以 AMD 风格的 callback-require 语法为例——

全局注册 Async Component：

{

require(['./my-async-component'],resolve)

}

Vue.component('async-webpack-example',myAsyncComponent)

局部注册 Async Component，单文件组件中 script 块内容：

{

require(['./my-async-component'],resolve)

}

// Vue 扩展实例选项，其他选项略

export default { <