网站上面的水印怎么做,网站未备案,ps做图网站,招商银行和建设银行网站功能对比当页面中一个文件过大并且还不一定用到的时候#xff0c;我们希望在使用到的时候才开始加载这个文件俗称按需加载。这样可以减少页面的响应时间#xff0c;提高访问速度。
使用webpack打包的出来的文件要实现以上的要求有两种方式#xff0c;一个是webpack特有的require.en…当页面中一个文件过大并且还不一定用到的时候我们希望在使用到的时候才开始加载这个文件俗称按需加载。这样可以减少页面的响应时间提高访问速度。
使用webpack打包的出来的文件要实现以上的要求有两种方式一个是webpack特有的require.ensure方法还有一个是import方法。
require.ensure(dep: array, cb: function, name?: string)
第一个参数是该模块的依赖第二个参数是模块加载完成后执行的回调第三个参数是对应webpack.config.js中output.chunkFilename: ‘[name].js’ 中的name。
index.html文件
button idbtn点击我
/buttonindex.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 模块asyncwebpack.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
