webpack html加载完毕,webpack中实现按需加载

当页面中一个文件过大并且还不一定用到的时候，我们希望在使用到的时候才开始加载这个文件俗称按需加载。这样可以减少页面的响应时间，提高访问速度。

使用webpack打包的出来的文件要实现以上的要求有两种方式，一个是webpack特有的require.ensure方法，还有一个是import方法。

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

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

index.html文件

点击我

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