require.ensure(dep: array, cb: function, name?: string)

第一个参数是该模块的依赖，第二个参数是模块加载完成后执行的回调，第三个参数是对应webpack.config.js中output.chunkFilename: ‘[name].js’ 中的name。

index.html文件

<button id='btn'>点击我
</button>

index.js文件

document.querySelector('#btn').onclick = function () {require.ensure([], function () {let a = require('./asynca.js')console.log('asynca模块加载完毕：'a)}, 'asynca')
}

asynca.js文件

console.log('我是async模块')
export const a = '模块async'

webpack.config.js文件

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {entry: './src/index.js',output: {path: path.resolve('./dist'),filename: '[name].[chunkHash].js',chunkFilename: '[name].[chunkHash].js'},plugins: [new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'})]
}

打包结果如下：

预览index.html，查看资源请求和输出情况：

打开dist中打包后的文件发现，只有一个index.html文件和man…js文件被加载了，并且require.ensure的回调并没有被执行过的迹象：

点击按钮后资源请求和输出情况：

asynca文件被动态加载进来，并且require.ensure的回调函数被执行了。

小结

通过以上的观察我们通过require.ensure实现了我们动态加载模块的目的。

import()

该方法返回一个promise，文件加载完成之后会将模块导出给promise的回调。

index.import.js

document.querySelector('#btn').onclick = function () {console.log('我是通过import来实现按需加载的')let a = import('./asynca.js')a.then(function (res) {console.log('加载完成的async模块', res)})
}

注：其他文件和ensure方法的一致。

打包结果如下：

预览index.html，查看资源请求和输出情况：

点击按钮后资源请求和输出情况：

小结

观察发现import方法同样可以实现按需加载的需求，但是生成的文件名是按数字来命名的，并不能像ensure的第三个参数来指定，我想应该是有方法实现的。

参考

https://segmentfault.com/q/1010000014699780/a-1020000015102124

webpack中实现按需加载相关推荐

vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
.NET中的按需加载/延迟加载 LazyT
业务场景: 在项目开发中,经常会遇到特定的对象使用的加载问题,有的实例对象我们创建之后并非需要使用,只是根据业务场景来调用,所以可能会导致很多无效的实例加载延迟初始化出现于.NET 4.0,主要用于 ...
AngularJS中的按需加载ocLazyLoad
欢迎大家讨论与指导 : ) 初学者,有不足的地方希望各位指出一.前言 ocLoayLoad是AngularJS的模块按需加载器.一般在小型项目里,首次加载页面就下载好所有的资源没有什么大问题.但是当 ...
vue单文件props写法_vue开发中怎么按需加载需要被填入props和自定义事件的组件？...
这种场景你可能需要把模态框包装成插件.vue插件开发和组件的区别 - 水秋玄im.mkinit.com vue插件和组件的区别使用插件的方式包装组件和直接注册全局组件其实是一样的,都是注册组件.不 ...
devtools 无法加载 sourcemap_用 babel-plugin 实现按需加载
注意:本文并不是Babel的初学者教程,您需要具备一定的基础知识.在阅读本文前应具备babel基础知识,或者阅读用户手册本文主要介绍babel的工作流程,插件的工作原理,以及一些在实战中实现按需加载 ...
React-router 4 按需加载的实现方式及原理(Code Splitting)
React-router 4 介绍了在router4以后,如何去实现按需加载Component,在router4以前,我们是使用getComponent的的方式来实现按需加载的,router4中,ge ...
webpack中利用【require.ensure()】和【import()】实现按需加载
1.require.ensure()themes为变量,设计多个文件名根据themes动态变化可以映入不同less文件如下require.ensure([], function (require) { ...
webpack v3 结合 react-router v4 做 dynamic import — 按需加载（懒加载)
为什么要做dynamic import? dynamic import不知道为什么有很多叫法,什么按需加载,懒加载,Code Splitting,代码分页等. 总之,就是在SPA,把JS代码分成N个页 ...
EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本...
为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...

webpack中实现按需加载

require.ensure(dep: array, cb: function, name?: string)

index.html文件

index.js文件

asynca.js文件

webpack.config.js文件

打包结果如下：

预览index.html，查看资源请求和输出情况：

点击按钮后资源请求和输出情况：

小结

import()

index.import.js

打包结果如下：

预览index.html，查看资源请求和输出情况：

点击按钮后资源请求和输出情况：

小结

参考

webpack中实现按需加载相关推荐

最新文章

热门文章