amnhh.github.io/index.html at master · amnhh/amnhh.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta name="description" content=""><title>叁歌 | To be the best of best.</title><link rel="stylesheet" type="text/css" href="/css/style.css?v=0.1.5"><link rel="stylesheet" type="text/css" href="/css/dark.css?v=0.0.0"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/normalize.css/normalize.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss/build/pure-min.min.css"><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/purecss/build/grids-responsive-min.css"><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script><link rel="icon" mask="" sizes="any" href="/favicon.ico"><link rel="Shortcut Icon" type="image/x-icon" href="/favicon.ico"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png"><script src="https://www.googletagmanager.com/gtag/js?id=G-HEVC7VFM0G" async></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'G-HEVC7VFM0G');
</script><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = 'https://hm.baidu.com/hm.js?' + '3b74b15709da4bba44d03cc55664915f';
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
  })();
</script><script type="text/javascript" src="//cdn.jsdelivr.net/npm/clipboard/dist/clipboard.min.js"></script><script type="text/javascript" src="//cdn.jsdelivr.net/gh/codeseven/toastr/build/toastr.min.js"></script><link rel="stylesheet" href="//cdn.jsdelivr.net/gh/codeseven/toastr/build/toastr.min.css"><meta name="generator" content="Hexo 5.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><h1 class="hidden">叁歌</h1><a id="logo" href="/.">叁歌</a><p class="description">To be the best of best.</p></div><div id="nav-menu"><a class="current" href="/."><i class="fa fa-home"> 首页</i></a><a href="/archives/"><i class="fa fa-archive"> 归档</i></a><a href="/about/"><i class="fa fa-user"> 关于</i></a></div></div><div class="pure-g" id="layout"><div class="pure-u-1 pure-u-md-3-4"><div class="content_container"><div class="post home"><h1 class="post-title"><a href="/2021/03/22/webpack/import-webpack-%E4%B8%AD%E7%9A%84%E6%87%92%E5%8A%A0%E8%BD%BD/">webpack - import() - webpack 中的懒加载</a></h1><div class="post-meta">2021-03-22</div><div class="post-content">懒加载，是一种常见的优化网页性能的手段。我们可以将其理解为延时加载，即：真正需要用到某些逻辑的时候，再将这些逻辑下载并执行。webpack 通过内部解析 `import()`  函数，默认支持了模块的懒加载。下面我们将从写法、加载执行原理两个方面来介绍 webpack 实现的懒加载方案。</div><p class="readmore"><a href="/2021/03/22/webpack/import-webpack-%E4%B8%AD%E7%9A%84%E6%87%92%E5%8A%A0%E8%BD%BD/">阅读全文</a></p></div><div class="post home"><h1 class="post-title"><a href="/2021/02/02/webpack/Compilation-%E6%9E%84%E5%BB%BA%E5%8A%A8%E4%BD%9C%E7%9A%84%E6%89%A7%E8%A1%8C%E8%80%85%E5%92%8C%E7%AE%A1%E7%90%86%E8%80%85/">webpack - Compilation -- 构建动作的执行者和管理者</a></h1><div class="post-meta">2021-02-02</div><div class="post-content">旨在通过阅读和调试 Compilation 模块相关的代码，了解编译的基本过程，学习编译过程中的关键步骤。</div><p class="readmore"><a href="/2021/02/02/webpack/Compilation-%E6%9E%84%E5%BB%BA%E5%8A%A8%E4%BD%9C%E7%9A%84%E6%89%A7%E8%A1%8C%E8%80%85%E5%92%8C%E7%AE%A1%E7%90%86%E8%80%85/">阅读全文</a></p></div><div class="post home"><h1 class="post-title"><a href="/2021/01/31/webpack/Complier-webpack-config-%E6%97%B6%E5%BE%97%E5%88%B0%E7%9A%84%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F/">webpack - Complier -- webpack(config) 时得到的是什么？</a></h1><div class="post-meta">2021-01-31</div><div class="post-content">旨在通过 阅读和 debug 的方式，了解 Compiler 为 webpack 做了什么事情，并学习其中的设计优秀的点。</div><p class="readmore"><a href="/2021/01/31/webpack/Complier-webpack-config-%E6%97%B6%E5%BE%97%E5%88%B0%E7%9A%84%E6%98%AF%E4%BB%80%E4%B9%88%EF%BC%9F/">阅读全文</a></p></div><div class="post home"><h1 class="post-title"><a href="/2021/01/30/webpack/Tapable-%E8%BF%9E%E6%8E%A5%E6%8F%92%E4%BB%B6%E7%9A%84%E6%A1%A5%E6%A2%81/">webpack - Tapable -- 连接插件的桥梁</a></h1><div class="post-meta">2021-01-30</div><div class="post-content">通过学习 tapable 的源码，理解 tapable 的内部执行机制。</div><p class="readmore"><a href="/2021/01/30/webpack/Tapable-%E8%BF%9E%E6%8E%A5%E6%8F%92%E4%BB%B6%E7%9A%84%E6%A1%A5%E6%A2%81/">阅读全文</a></p></div><div class="post home"><h1 class="post-title"><a href="/2021/01/29/webpack/%E4%BB%8E-boundle-%E7%9C%8B%E6%95%B4%E4%B8%AA%E6%89%93%E5%8C%85%E5%90%8E%E7%9A%84%E6%96%87%E4%BB%B6/">webpack - 从 boundle 看整个打包后的文件</a></h1><div class="post-meta">2021-01-29</div><div class="post-content">旨在通过最简易的 demo，来查看 webpack 打包出的文件长什么样子，如何运行，如何保证模块化。</div><p class="readmore"><a href="/2021/01/29/webpack/%E4%BB%8E-boundle-%E7%9C%8B%E6%95%B4%E4%B8%AA%E6%89%93%E5%8C%85%E5%90%8E%E7%9A%84%E6%96%87%E4%BB%B6/">阅读全文</a></p></div><nav class="page-navigator"><span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><span class="space">&hellip;</span><a class="page-number" href="/page/8/">8</a><a class="extend next" rel="next" href="/page/2/">下一页</a></nav></div></div><div class="pure-u-1-4 hidden_mid_and_down"><div id="sidebar"><div class="widget"><div class="widget-title"><i class="fa fa-folder-o"> 分类</i></div><ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Jquery/">Jquery</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Virtual-DOM/">Virtual DOM</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Vue/">Vue</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/babel/">babel</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/javascript/">javascript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/leetcode/">leetcode</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/webpack/">webpack</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E5%9B%BD%E9%99%85%E5%8C%96/">前端国际化</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/">数据结构</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E6%97%A7%E5%8D%9A%E5%AE%A2/">旧博客</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E7%BD%91%E7%BB%9C/">网络</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">读书笔记</a></li></ul></div><div class="widget"><div class="widget-title"><i class="fa fa-star-o"> 标签</i></div><div class="tagcloud"><a href="/tags/%E6%9D%82%E8%B0%88/" style="font-size: 15px;">杂谈</a> <a href="/tags/HTTP/" style="font-size: 15px;">HTTP</a> <a href="/tags/HTTP-%E6%9D%83%E5%A8%81%E6%8C%87%E5%8D%97/" style="font-size: 15px;">HTTP 权威指南</a> <a href="/tags/%E3%80%8A%E4%B8%8D%E5%9C%A8%E4%BB%96%E6%96%B9%E3%80%8B/" style="font-size: 15px;">《不在他方》</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 15px;">前端</a> <a href="/tags/js/" style="font-size: 15px;">js</a> <a href="/tags/You-Don-t-Know-Javascript/" style="font-size: 15px;">You Don't Know Javascript</a> <a href="/tags/%E3%80%8A%E5%A4%A9%E6%89%8D%E5%9C%A8%E5%B7%A6-%E7%96%AF%E5%AD%90%E5%9C%A8%E5%8F%B3%E3%80%8B/" style="font-size: 15px;">《天才在左 疯子在右》</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" style="font-size: 15px;">数据结构</a> <a href="/tags/%E5%9F%BA%E6%9C%AC%E5%8A%9F/" style="font-size: 15px;">基本功</a> <a href="/tags/javascript/" style="font-size: 15px;">javascript</a> <a href="/tags/%E5%B7%A5%E7%A8%8B%E5%8C%96/" style="font-size: 15px;">工程化</a> <a href="/tags/leetcode/" style="font-size: 15px;">leetcode</a> <a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size: 15px;">算法</a> <a href="/tags/http/" style="font-size: 15px;">http</a> <a href="/tags/rfc/" style="font-size: 15px;">rfc</a> <a href="/tags/uri/" style="font-size: 15px;">uri</a> <a href="/tags/%E7%BC%96%E8%AF%91/" style="font-size: 15px;">编译</a> <a href="/tags/%E4%B8%A4%E5%91%A8%E8%87%AA%E5%88%B6%E8%84%9A%E6%9C%AC%E8%AF%AD%E8%A8%80/" style="font-size: 15px;">两周自制脚本语言</a> <a href="/tags/jquery/" style="font-size: 15px;">jquery</a> <a href="/tags/%E6%8A%80%E6%9C%AF%E9%92%BB%E7%A0%94/" style="font-size: 15px;">技术钻研</a> <a href="/tags/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" style="font-size: 15px;">读书笔记</a> <a href="/tags/%E5%9F%BA%E7%A1%80/" style="font-size: 15px;">基础</a> <a href="/tags/%E5%89%8D%E7%AB%AF%E8%BF%9B%E9%98%B6/" style="font-size: 15px;">前端进阶</a> <a href="/tags/%E5%89%8D%E7%AB%AF%E5%9B%BD%E9%99%85%E5%8C%96/" style="font-size: 15px;">前端国际化</a> <a href="/tags/%E7%BD%91%E7%BB%9C/" style="font-size: 15px;">网络</a> <a href="/tags/typescript/" style="font-size: 15px;">typescript</a> <a href="/tags/Array-%E6%96%B9%E6%B3%95/" style="font-size: 15px;">Array 方法</a> <a href="/tags/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/" style="font-size: 15px;">前端基础</a> <a href="/tags/virtual-dom/" style="font-size: 15px;">virtual dom</a> <a href="/tags/%E9%98%9F%E5%88%97/" style="font-size: 15px;">队列</a> <a href="/tags/%E6%95%B0%E7%BB%84/" style="font-size: 15px;">数组</a> <a href="/tags/algorithm/" style="font-size: 15px;">algorithm</a> <a href="/tags/sort/" style="font-size: 15px;">sort</a> <a href="/tags/webpack/" style="font-size: 15px;">webpack</a></div></div></div></div><div class="pure-u-1 pure-u-md-3-4"><div id="footer">Copyright © 2021 <a href="/." rel="nofollow">叁歌.</a> Powered by<a rel="nofollow" target="_blank" href="https://hexo.io"> Hexo.</a><a rel="nofollow" target="_blank" href="https://github.com/tufu9441/maupassant-hexo"> Theme</a> by<a rel="nofollow" target="_blank" href="https://github.com/pagecho"> Cho.</a></div></div></div><a class="show" id="rocket" href="#top"></a><script type="text/javascript" src="/js/totop.js?v=0.0.0" async></script><script type="text/javascript" src="/js/copycode.js" successtext="复制成功!"></script><link rel="stylesheet" type="text/css" href="/css/copycode.css"><script type="text/javascript" src="/js/codeblock-resizer.js?v=0.0.0"></script><script type="text/javascript" src="/js/smartresize.js?v=0.0.0"></script><script type="text/javascript" src="/js/fancybox.js?v=0.0.0" async></script><link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox/dist/jquery.fancybox.min.css"></div></body></html>