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 相关文章推荐
关于JavaScript的面向对象和继承有利新手学习
Jan 11 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
Angular2数据绑定详解
Apr 18 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
Vue-cli@3.0 插件系统简析
Sep 05 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
ant design charts 获取后端接口数据展示
May 25 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生成网页桌面快捷方式
2017/05/05 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
2020/08/21 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
python flask 多对多表查询功能
2017/06/25 Python
python如何获取当前文件夹下所有文件名详解
2019/01/25 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Pycharm+django2.2+python3.6+MySQL实现简单的考试报名系统
2019/09/05 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
大学生关于奋斗的演讲稿
2014/01/09 职场文书
诚信考试承诺书
2014/03/27 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL