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 相关文章推荐
Js的MessageBox
Dec 03 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
javascript实现方法调用与方法触发小结
Mar 26 Javascript
JavaScript几种数组去掉重复值的方法推荐
Apr 12 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 Javascript
利用js canvas实现五子棋游戏
Oct 11 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
php验证手机号码
2015/11/11 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
jQuery实现轮播图源码
2019/10/23 jQuery
Python fileinput模块使用实例
2015/06/03 Python
python实现网站的模拟登录
2016/01/04 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
python语言中有算法吗
2020/06/16 Python
师范生实习的个人自我鉴定
2013/10/20 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
手机银行营销方案
2014/03/14 职场文书
个人承诺书格式范文
2015/04/29 职场文书