把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步 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. 关于http和rpc的区别(segmentfault上的回答)

    问题最近用了谷歌的grpc,所以对rpc和http有一点疑惑,感觉这两个东西功能上是一样的,rpc某个服务监听某一个方法,客户端调用这个方法,返回相应的数据,和http监听某个方法的路由 返回相应的数 ...

  2. Xilinx RocketIO模块的介绍

    摘要: 在高速电路系统设计中,差分串行通信方式正在取代并行总线方式,以满足系统对高带宽数据通信的需求.RocketIO是Virtex2 Pro以上系列FPGA中集成的专用高速串行数据收发模块,可用于实 ...

  3. ubuntu 下查看某个包是否 安装

    dpkg -l   dpkg -l|grep package-name   dpkg --status package-name   查看/var/lib/dpkg/status 内容

  4. NYOJ 诡异的电梯 && nyoj 1204 魔法少女

    诡异的电梯[Ⅰ] 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 新的宿舍楼有 N(1≤N≤100000) 层 and M(1≤M≤100000)个学生. 在新的宿舍楼里 ...

  5. Play on Words UVA - 10129 欧拉路径

    关于欧拉回路和欧拉路径 定义:欧拉回路:每条边恰好只走一次,并能回到出发点的路径欧拉路径:经过每一条边一次,但是不要求回到起始点 ①首先看欧拉回路存在性的判定: 一.无向图每个顶点的度数都是偶数,则存 ...

  6. Trees in a Wood. UVA 10214 欧拉函数或者容斥定理 给定a,b求 |x|<=a, |y|<=b这个范围内的所有整点不包括原点都种一棵树。求出你站在原点向四周看到的树的数量/总的树的数量的值。

    /** 题目:Trees in a Wood. UVA 10214 链接:https://vjudge.net/problem/UVA-10214 题意:给定a,b求 |x|<=a, |y|&l ...

  7. 通过 after() 和 before() 方法添加若干新元素

    after() 和 before() 方法能够通过参数接收无限数量的新元素.可以通过 text/HTML.jQuery 或者 JavaScript/DOM 来创建新元素. 在下面的例子中,我们创建若干 ...

  8. poj 2516(拆点+最小权匹配)

    题目链接:http://poj.org/problem?id=2516 思路:考虑某种货物,由于某个订货商可能接受来自不同地区的货物,而某一地区的货物也可能送给不同的订货商,显然不能直接进行匹配,必须 ...

  9. 三个内置模块shutil logging hashlib config

    高级的 文件.文件夹.压缩包 处理模块 shutil.copyfileobj(fsrc, fdst[, length])将文件内容拷贝到另一个文件中 1 import shutil 2 3 shuti ...

  10. C字符串复制

    void mystrcpy(char *from, char *to) { for(; *from != '\0'; from++, to++) { *to = *from; } *to = '\0' ...