vue_router打包(webpack)
把组件按组分块
有时候我们想把某个路由下的所有组件都打包在同个异步 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)的更多相关文章
- VUE 多页面打包webpack配置
思路:多配置一个main的文件,用于webpack入口使用, 然后路由的导向也应该默认指向新组件,最后通过webpack构建出一个新的独立的html文件. 缺点:生成多个html会new出多个vu ...
- 快速了解前端打包 webpack
一.介绍 (1)概念 webpack 用于编译 JavaScript 模块,是 JavaScript 静态模块的打包工具.从 webpack v4.0.0 开始,可以不用引入一个配置文件. (2)核心 ...
- app:利用HBuilder打包webpack项目
1.安装HBuilder 2.将你的项目在HBuilder中打开 3.控制台 打包编译 npm run build 4.新建一个app项目,将项目编译生成的dist文件夹 ,复制到app项目中 5.双 ...
- 模块打包 webpack
1.模块打包工具 2.工作方式: 1)将存在依赖关系的模块按照特定规则合并为单个JS文件,一次全部加载进页面中 2)在页面初始时加载一个入口模块,其他模块异步的进行加载 3.优势: 1)支持AMD,C ...
- Webpack:前端资源模块化管理和打包工具
一.介绍: Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生 产环境部署的前端资源.还可以将按需加载的模块进行代码分隔,等到实际需要的时候再 ...
- [js高手之路]深入浅出webpack系列1-安装与基本打包用法和命令参数
webpack,我想大家应该都知道或者听过,Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包.现代的前端开发很多环境都依赖webpack构建,比如vue官方就推荐使用webpa ...
- webpack打包vue
一.原理 webpack 背后的原理其实就是把所有的非 js 资源都转换成 js (如把一个 css 文件转换成“创建一个 style 标签并把它插入 document ”的脚本.把图片转换成一个图片 ...
- [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- webpack打包css
1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-l ...
随机推荐
- 用户输入URL后发生了什么,以及优化问题
用户角度:1.打开浏览器2.输入URL3.按下回车4.浏览器呈现画面 当用户输入页面地址后,浏览器获得用户希望访问的地址,便向该站点服务器发起一系列的请求,这些请求不光包括对页面的请求,还包括对页面中 ...
- Atitit.java 反编译 工具 attilax 总结
Atitit.java 反编译 工具 attilax 总结 1. 三大核心核心引擎——1 2. JAD Jad attitude推荐这个1 2.1. Jdec.2 2.2. 二. 源码开放的 J ...
- Atitit。Tree文件解析器的原理流程与设计实现 java c# php js
Atitit.Tree文件解析器的原理流程与设计实现 java c# php js 1. 解析原理与流程1 1.1. 判断目录 ,表示服 dirFlagChar = "└├─&quo ...
- 实时竞价(RTB) 介绍(基础篇)
前言: 说到"实时竞价"大家一定都不陌生,那么为何如今实时竞价发展这么迅猛,当然这个主要得益于总体移动互联网环境的成熟,以及中国本地移动广告市场出现爆发式增长.那么到底什么是实时竞 ...
- GroupCoordinator joingroup源码解析
转发请注明原创地址 http://www.cnblogs.com/dongxiao-yang/p/7463693.html kafka新版consumer所有的group管理工作在服务端都由Group ...
- Java配置文件读取和路径设置
记录几种读取配置文件的方法,以及配置文件的放置路径. 1.使用PropertiesLoaderUtils工具类(springframework包提供) 优点:实时加载配置文件,修改后立即生效,不必重启 ...
- hdu1873 看病要排队 优先队列
看病要排队 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status ...
- AFNet3.0上传图片
很多iOS应用都会遇到需要上传图片的情况,比如修改个人资料时需要上传自己的头像,最近我也遇到了这种情况,首先参考之前写过的AFNetWorking3.0处理请求头和请求内容. 我们在上述博客的基础之上 ...
- eclipse JavaEE版"javax.servlet.http.HttpServlet" was not found on the Java Build Path问题的解决办法
使用eclipse JavaEE 版,新建 Dynamic Web Project 项目.在项目里添加 JSP 文件,会在文件头部出现错误提示.提示语句为:The superclass "j ...
- php或js判断网站访问者来自手机或者pc端源码
很多时候也可以通过逻辑程序来进行判断,如PHP.JS是常用的两种识别访问设备类型的常用方法. 原理都是采用识别访问客户端的HTTP_USER_AGENT,然后进行关键字匹配进行确定设备类型,对于伪造H ...