webpack学习系列-lazy-loading (https://webpack.js.org/guides/lazy-loading/)
2017-08-08 15:46
429 查看
Lazy Loading
懒加载,或者说按需加载,是优化网站或者应用的一个非常好的方式。这个实践本质上是将代码在逻辑点切割,当用户做了某些点击或者互动后,将需要的代码或者未来会需要的代码加载。这样做会加快应用的首屏加载,减少整个应用的资源加载量,因为一些代码块可能永远不会被加载。Example
project上节(代码分割)的例子将生成的js文件一分为二,只要引入的js文件运行了,lodash.bundle.js就会被加载,这种技术对我们并没有太大帮助,反而会对性能产生负面影响。下面我们做一些更改,只有用户点击按钮,才会请求print.js。例子如下:
import _ from 'lodash';
function component() {
var element = document.createElement('div');
var btn = document.createElement('button');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
btn.innerHTML = 'Click me and check the console!';
element.appendChild(btn);
btn.onclick = e => import('./print').then(module => { //lazy load核心,只有点击按钮时,才会加载print.js文件
var print = module.default;
print();
})
return element;
}
document.body.appendChild(component());
以上代码的构建结果如下图:
打开index.html,会发现,页面打开时,只会加载app1.bundle.js文件,当点击页面上的按钮时,会加载0.bundle.js文件,进而控制台打印出消息。
相关文章推荐
- webpack学习系列三(https://webpack.js.org/concepts/output/)
- webpack学习-缓存(https://webpack.js.org/guides/caching/)
- webpack学习-shimming模块补充(https://webpack.js.org/guides/shimming/)
- webpack学习-tree shaking(https://webpack.js.org/guides/tree-shaking/)
- webpack学习系列二(https://webpack.js.org/concepts/entry-points/ 翻译)
- webpack-生产环境最佳实践(https://webpack.js.org/guides/production/)
- webpack代码分割(https://webpack.js.org/guides/code-splitting/)
- webpack学习系列一(https://webpack.js.org/concepts/ 翻译)
- vuejs+webpack+node模块化学习
- Vue.js学习之使用Webpack加速应用的方式详解
- Vue.js学习之vue-router vuex axios webpack
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- react webpack.config.js 入门学习
- Selenium2学习-041-chromedriver:org.openqa.selenium.WebDriverException: unknown error: cannot determine loading status from unexpected alert open
- webpack 学习笔记 --- node.js开发
- 结合nodejs+webpack+vuejs开启时尚学习套路
- [js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)