把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步 chunk 中。只需要 给 chunk 命名,提供 require.ensure第三个参数作为 chunk 的名称:

require.ensure语法:

require.ensure(dependencies: String[], callback: function(require), chunkName: String)
const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'home_22')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'itme')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'score') callback:是用箭头函数来实现
参数=>表达式
其中参数r与后面的r(require('./Foo.vue')),中的r一致即可
如果是rr那么后面的为rr(require('./Foo.vue')),如果是jj 那么后面也是jj
参数名可以自已来命名。

Webpack 将相同 chunk 下的所有异步模块打包到一个异步块里面 —— 这也意味着我们无须明确列出 require.ensure的依赖(传空数组)

会根据chunk的名字来打包到不同的模块js中,这样就可以在要用的时候加载(路由懒加载);

vue_router打包(webpack)的更多相关文章

  1. VUE 多页面打包webpack配置

      思路:多配置一个main的文件,用于webpack入口使用, 然后路由的导向也应该默认指向新组件,最后通过webpack构建出一个新的独立的html文件. 缺点:生成多个html会new出多个vu ...

  2. 快速了解前端打包 webpack

    一.介绍 (1)概念 webpack 用于编译 JavaScript 模块,是 JavaScript 静态模块的打包工具.从 webpack v4.0.0 开始,可以不用引入一个配置文件. (2)核心 ...

  3. app:利用HBuilder打包webpack项目

    1.安装HBuilder 2.将你的项目在HBuilder中打开 3.控制台 打包编译 npm run build 4.新建一个app项目,将项目编译生成的dist文件夹 ,复制到app项目中 5.双 ...

  4. 模块打包 webpack

    1.模块打包工具 2.工作方式: 1)将存在依赖关系的模块按照特定规则合并为单个JS文件,一次全部加载进页面中 2)在页面初始时加载一个入口模块,其他模块异步的进行加载 3.优势: 1)支持AMD,C ...

  5. Webpack:前端资源模块化管理和打包工具

    一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...

  6. [js高手之路]深入浅出webpack系列1-安装与基本打包用法和命令参数

    webpack,我想大家应该都知道或者听过,Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包.现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpa ...

  7. webpack打包vue

    一.原理 webpack 背后的原理其实就是把所有的非 js 资源都转换成 js (如把一个 css 文件转换成“创建一个 style 标签并把它插入 document ”的脚本.把图片转换成一个图片 ...

  8. [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数

    [js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...

  9. webpack打包css

    1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-l ...

随机推荐

  1. sqlserver利用链接服务器查询或同步本地数据库和远程数据库

    这个实际上是SQLserver的分布式查询:如果一个项目需要二至多台服务器,而我们又必须从几台服务器中将数据取出来,这就必须用分布式查询!在这里有两个概念:本地数据源.远程数据源!本地数据源指的是单个 ...

  2. [k8s]openshiftv1.5.1安装笔记

    centos7安装 net.ifnames=0 biosdevname=0 初始化系统 yum install wget -y wget -O /etc/yum.repos.d/CentOS-Base ...

  3. 浅谈Java中的System.gc()的工作原理

    很多人把Java的“效率低下”归咎于不能自由管理内存,但我们也知道将内存管理封装起来的好处,这里就不赘述. Java中的内存分配是随着new一个新的对象来实现的,这个很简单,而且也还是有一些可以“改进 ...

  4. [c#.Net] NUnit Test 体验

    NUit Test Adapter 安装,两种方式 第一种:从扩展和更新里搜索nunit,进行下载安装

  5. Linux下printf函数显示不同的颜色(转)

    Linux下printf函数显示不同的颜色 在学习Linux网络编程的时候做一个聊天系统,当时为了界面更漂亮点,于是搜索了下关于printf()函数的用法,给printf的输出加上些特效比如颜色,可以 ...

  6. IOS设计模式的六大设计原则之接口隔离原则(ISP,Interface Segregation Principle)

    定义 客户端不应该依赖它不需要的接口: 一个类对另一个类的依赖应该建立在最小的接口上. 定义解读 定义包含三层含义: 一个类对另一个类的依赖应该建立在最小的接口上: 一个接口代表一个角色,不应该将不同 ...

  7. IOS设计模式浅析之抽象工厂模式(Abstract Factory)

    概述 在前面两章中,分别介绍了简单工厂模式和工厂方法模式,我们知道简单工厂模式的优点是去除了客户端与具体产品的依赖,缺点是违反了“开放-关闭原则”:工厂方法模式克服了简单工厂模式的缺点,将产品的创建工 ...

  8. Alluxio部署(local模式)

    下载(pre-build for Hadoop 2.7) http://www.alluxio.org/download` 解压 tar -xvf alluxio-1.3.0-hadoop2.7-bi ...

  9. AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 最大的 ...

  10. python django -6 常用的第三方包或工具

    常用的第三方包或工具 富文本编辑器 缓存 全文检索 celery 布署 富文本编辑器 借助富文本编辑器,管理员能够编辑出来一个包含html的页面,从而页面的显示效果,可以由管理员定义,而不用完全依赖于 ...