vue按需加载组件webpack require.ensure的方法


Posted in Javascript onDecember 13, 2017

vue-cli是由vue官方发布的快速构建vue单页面的脚手架。

使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,

打包位置是 dist/static/js/app.[contenthash].js

类似下面的路由代码

router/index.js 路由相关信息,该路由文件引入了多个 .vue组件

import Hello from '@/components/Hello'
import Province from '@/components/Province'
import Segment from '@/components/Segment'
import User from '@/components/User'
import Loading from '@/components/Loading'

执行 npm run build 会打包为一个整体 app.[contenthash].js ,这个文件是非常大,可能几兆或者几十兆,加载会很慢

vue按需加载组件webpack require.ensure的方法

所以我们需要分模块打包,把我们想要组合在一起的组件打包到一个 chunk块中去,分模块打包需要下面这样使用 webpack的 require.ensure,并且在最后加入一个 chunk名,相同 chunk名字的模块将会打包到一起。

webpack中利用require.ensure()实现按需加载

1、require.ensure()

webpack 在编译时,会静态地解析代码中的 require.ensure(),同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。

语法如下:

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

依赖 dependencies

这是一个字符串数组,通过这个参数,在所有的回调函数的代码被执行前,我们可以将所有需要用到的模块进行声明。

回调 callback

当所有的依赖都加载完成后,webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。因此,我们可以进一步 require() 依赖和其它模块提供下一步的执行。

chunk名称 chunkName

chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称,我们可以保证所有的依赖都会一起放进相同的 文件束(bundle)。

让我们来看以下的项目

\\ file structure
  |
  js --|
  |  |-- entry.js
  |  |-- a.js
  |  |-- b.js
  webpack.config.js
  |
  dist
\\ entry.js
require('a');
require.ensure([], function(require){
  require('b');
});
\\ a.js
console.log('***** I AM a *****');
\\ b.js
console.log('***** I AM b *****');
\\ webpack.config.js
var path = require('path');
module.exports = function(env) {
  return {
    entry: './js/entry.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  }
}

通过执行这个项目的 webpack 构建,我们发现 webpack 创建了2个新的文件束, bundle.js 和 0.bundle.js。

entry.js 和 a.js 被打包进 bundle.js.

b.js 被打包进 0.bundle.js.

2、require.ensure() 的坑点

(1)、空数组作为参数

require.ensure([], function(require){
  require('./a.js');
});

以上代码保证了拆分点被创建,而且 a.js 被 webpack 分开打包。

(2)、依赖作为参数

require.ensure(['./a.js'], function(require) {
  require('./b.js');
});

上面代码, a.js 和 b.js 都被打包到一起,而且从主文件束中拆分出来。但只有 b.js 的内容被执行。a.js 的内容仅仅是可被使用,但并没有被输出。

想去执行 a.js,我们需要异步地引用它,如 require(‘./a.js'),让它的 JavaScritp 被执行。

(3)、单独打包成自己写的名字配置

需要配置chunkFilename,和publicPath。publicPath是按需加载单独打包出来的chunk是以publicPath会基准来存放的,chunkFilename:[name].js这样才会最终生成正确的路径和名字

module.exports={
  entry:'./js/entry.js',
  output:{
    path:path.resolve(__dirname,"./dist"),
    filename:'js/a.bundle.js',
    publicPath:"./",
    chunkFilename:'js/[name].js'
  }

所以router/index.js 修改为懒加载组件:

const Province = r => require.ensure([], () => r(require('@/components/Province.vue')), 'chunkname1')
const Segment = r => require.ensure([], () => r(require('@/components/Segment.vue')), 'chunkname2')
const Loading = r => require.ensure([], () => r(require('@/components/Loading.vue')), 'chunkname3')
const User = r => require.ensure([], () => r(require('@/components/User.vue')), 'chunkname3')

根据 chunkame的不同, 上面的四个组件, 将会被分成3个块打包,最终打包之后与组件相关的js文件会分为3个 (除了app.js,manifest.js, vendor.js)

分模块打包之后在 dist目录下是这样的, 这样就把一个大的 js文件分为一个个小的js文件了,按需去下载,其他的使用方法和import的效果一样

vue按需加载组件webpack require.ensure的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
JavaScript实现网页计算器功能
Oct 29 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 #Javascript
vue组件中使用iframe元素的示例代码
Dec 13 #Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 #Javascript
vue实现nav导航栏的方法
Dec 13 #Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 #Javascript
仿京东快报向上滚动的实例
Dec 13 #Javascript
Angular2使用vscode断点调试ts文件的方法
Dec 13 #Javascript
You might like
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
prototype 的说明 js类
2006/09/07 Javascript
地震发生中逃生十大法则
2008/05/12 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
form+iframe解决跨域上传文件的方法
2016/11/18 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
python文件操作相关知识点总结整理
2016/02/22 Python
Python 线程池用法简单示例
2019/10/02 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
python如何绘制疫情图
2020/09/16 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
linux面试题参考答案(5)
2014/09/01 面试题
行政助理求职自荐信
2013/10/26 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
反邪教标语
2014/06/23 职场文书
2016年母亲节寄语
2015/12/04 职场文书
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技
ipad隐藏软件app图标方法
2022/04/19 数码科技
Win2008系统搭建DHCP服务器
2022/06/25 Servers