cainiaoblog 23.2.205 → 23.2.207
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/article/14192.html +1 -1
- package/article/53962.html +1 -1
- package/article/9c3c56c.html +24 -13
- package/atom.xml +22 -22
- package/baidusitemap.xml +495 -495
- package/extConfigs/extension.json +1 -1
- package/package.json +1 -1
- package/search.xml +3 -3
- package/sitemap.xml +353 -353
package/article/14192.html
CHANGED
|
@@ -506,7 +506,7 @@ server.listen(3000, () => console.log("正在监听 3000 端口"));
|
|
|
506
506
|
</ul>
|
|
507
507
|
<h1 id="源代码"><a href="#源代码" class="headerlink" title="源代码"></a>源代码</h1><p>源代码增加了一些按钮的状态，交互更加友好，文章表达比较晦涩的地方可以跳转到源代码查看</p>
|
|
508
508
|
<p><a target="_blank" rel="noopener" href="https://github.com/yeyan1996/file-upload">file-upload</a><br><img src="https://user-gold-cdn.xitu.io/2020/1/9/16f8859bdc09fa25?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" alt="xuehuayu.cn"><br>谢谢观看 :)</p>
|
|
509
|
-
<h1 id="字节跳动-EA（Enterprise-Application）前端团队招人啦～"><a href="#字节跳动-EA（Enterprise-Application）前端团队招人啦～" class="headerlink" title="字节跳动 EA（Enterprise Application）前端团队招人啦～"></a>字节跳动 EA（Enterprise Application）前端团队招人啦～</h1><p>坐标上海/北京，校招社招都有，hc 无上限，有兴趣的欢迎投递简历至 <a href="mailto:1&#
|
|
509
|
+
<h1 id="字节跳动-EA（Enterprise-Application）前端团队招人啦～"><a href="#字节跳动-EA（Enterprise-Application）前端团队招人啦～" class="headerlink" title="字节跳动 EA（Enterprise Application）前端团队招人啦～"></a>字节跳动 EA（Enterprise Application）前端团队招人啦～</h1><p>坐标上海/北京，校招社招都有，hc 无上限，有兴趣的欢迎投递简历至 <a href="mailto:1996yeyan@gmail.com">1996yeyan@gmail.com</a>，校招内推码 Q7QUGMV</p>
|
|
510
510
|
<h1 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h1><p><a target="_blank" rel="noopener" href="https://juejin.im/post/5da14778f265da5bb628e590">写给新手前端的各种文件上传攻略，从小图片到大文件断点续传</a></p>
|
|
511
511
|
<p><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/slice">Blob.slice</a><a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/slice">developer.mozilla.org/zh-CN/docs/…</a>)</p>
|
|
512
512
|
</div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&UnionPayQR=null&GitHub=null&BTCQR=null&BTCKEY=null&PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/14192.html">https://xuehuayu.cn/article/14192.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"><a href="/tags/%E8%BD%AC%E8%BD%BD/">转载</a></div><div class="post-nav"><a class="pre" href="/article/45157.html">新型肺炎疫情最新动态播报汇总</a><a class="next" href="/article/54313.html">70个JavaScript面试问题</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
|
package/article/53962.html
CHANGED
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
<li>render()</li>
|
|
68
68
|
<li>componentDidMount()</li>
|
|
69
69
|
</ol>
|
|
70
|
-
<p>注意: getDerivedStateFromProps/getSnapshotBeforeUpdate 和 componentWillMount/componentWillReceiveProps/componentWillUpdate 如果同时存在，React会在控制台给出警告信息，且仅执行 getDerivedStateFromProps/getSnapshotBeforeUpdate 【<a href="mailto:Re&#
|
|
70
|
+
<p>注意: getDerivedStateFromProps/getSnapshotBeforeUpdate 和 componentWillMount/componentWillReceiveProps/componentWillUpdate 如果同时存在，React会在控制台给出警告信息，且仅执行 getDerivedStateFromProps/getSnapshotBeforeUpdate 【<a href="mailto:React@16.7.0">React@16.7.0</a>】</p>
|
|
71
71
|
<blockquote>
|
|
72
72
|
<p>运行时:</p>
|
|
73
73
|
</blockquote>
|
package/article/9c3c56c.html
CHANGED
|
@@ -16,8 +16,10 @@
|
|
|
16
16
|
})();
|
|
17
17
|
</script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src='https://hm.baidu.com/hm.js?011f0b44e8452bfa57fbfa23c5fe7683';var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();
|
|
18
18
|
</script><script async src="https://www.googletagmanager.com/gtag/js?id=UA-150860401-1"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);};gtag('js',new Date());gtag('config','UA-150860401-1');
|
|
19
|
-
</script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</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"><h1 class="post-title c-post">vue、react、webpack、babel</h1><div class="post-meta"><span class="date">2023-03-06</span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 4.
|
|
19
|
+
</script><script type="text/javascript" src="//cdn.staticaly.com/gh/npljy/npljy.github.io/main/js/fixedPage.min.js"></script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="body_container"><div id="header"><div class="site-name"><a id="logo" href="/.">前端壹菜鸟</a><p class="description">关注前端知识，收集精彩博文，做技术的搬运工</p></div><div id="nav-menu"><a class="current" href="/." target="_self"><i class="fa fa-home"> 首页</i></a><a href="/archives/" target="_self"><i class="fa fa-archive"> 归档</i></a><a href="/guestbook/" target="_self"><i class="fa fa-comments"> 留言</i></a><a href="/about/" target="_self"><i class="fa fa-user"> 关于</i></a><a href="https://laonongmin.online/" target="_target"><i class="fa fa-group"> 看看</i></a><a href="https://love.xuehuayu.cn/" target="_target"><i class="fa fa-heart"> LOVE</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"><h1 class="post-title c-post">vue、react、webpack、babel</h1><div class="post-meta"><span class="date">2023-03-06</span><span id="busuanzi_container_page_pv"> | <span id="busuanzi_value_page_pv"><i class="fa fa-spinner"></i></span><span> 阅读</span></span><span class="post-time"><span class="post-meta-item-text"> | </span><span class="post-meta-item-icon"><i class="fa fa-keyboard-o"></i><span class="post-count"> 4.7k</span><span class="post-meta-item-text"> 字</span></span></span><span class="post-time"> | <span class="post-meta-item-icon"><i class="fa fa-hourglass-half"></i><span class="post-count"> 20</span><span class="post-meta-item-text"> 分钟</span></span></span></div><a class="disqus-comment-count" href="/article/9c3c56c.html#vcomment"><span class="waline-comment-count" data-path="/article/9c3c56c.html"></span><span> 条评论</span></a><div class="post-content"><p>vue，react，webpack，babel 要点总结</p>
|
|
20
20
|
<span id="more"></span>
|
|
21
|
+
|
|
22
|
+
<p><a target="_blank" rel="noopener" href="https://juejin.cn/post/7146973901166215176">掘金大牛：「历时8个月」10万字前端知识体系总结（基础知识篇）</a></p>
|
|
21
23
|
<h2 id="Vue"><a href="#Vue" class="headerlink" title="Vue"></a>Vue</h2><h3 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h3><h4 id="v-html"><a href="#v-html" class="headerlink" title="v-html"></a>v-html</h4><p>原始html内容，有xss防线</p>
|
|
22
24
|
<h4 id="computed"><a href="#computed" class="headerlink" title="computed"></a>computed</h4><ul>
|
|
23
25
|
<li>有缓存，data不变不会重新计算</li>
|
|
@@ -25,9 +27,7 @@
|
|
|
25
27
|
<h4 id="watch"><a href="#watch" class="headerlink" title="watch"></a>watch</h4><p>监听引用类型，使用下面方法深度监听，但是<strong>拿不到<code>oldVal</code></strong></p>
|
|
26
28
|
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">watch</span>:{</span><br><span class="line"> <span class="attr">info</span>: {</span><br><span class="line"> handler (oldVal, val) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>((oldVal, val)</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">deep</span>: <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
|
|
27
29
|
|
|
28
|
-
<h4 id="class-写法"><a href="#class-写法" class="headerlink" title="class 写法"></a>class 写法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">data () {</span><br><span class="line"> <span class="attr">isblack</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">isRed</span>: <span class="literal">false</span>,</span><br><span class="line"> </span><br><span class="line"> <span class="attr">black</span>: <span class="string">"black"</span>,</span><br><span class="line"> <span class="attr">red</span>: <span class="string">"red"</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
|
|
29
|
-
|
|
30
|
-
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">:<span class="keyword">class</span>={<span class="attr">black</span>: isblack, <span class="attr">red</span>: isRed}</span><br></pre></td></tr></table></figure>
|
|
30
|
+
<h4 id="class-写法"><a href="#class-写法" class="headerlink" title="class 写法"></a>class 写法</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">data () {</span><br><span class="line"> <span class="attr">isblack</span>: <span class="literal">true</span>,</span><br><span class="line"> <span class="attr">isRed</span>: <span class="literal">false</span>,</span><br><span class="line"> </span><br><span class="line"> <span class="attr">black</span>: <span class="string">"black"</span>,</span><br><span class="line"> <span class="attr">red</span>: <span class="string">"red"</span></span><br><span class="line">}</span><br><span class="line">:<span class="keyword">class</span>={<span class="attr">black</span>: isblack, <span class="attr">red</span>: isRed}</span><br></pre></td></tr></table></figure>
|
|
31
31
|
|
|
32
32
|
<p>或者</p>
|
|
33
33
|
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">:<span class="keyword">class</span>=[black, red]</span><br></pre></td></tr></table></figure>
|
|
@@ -45,8 +45,8 @@
|
|
|
45
45
|
<li>有参数，用<code>$event</code></li>
|
|
46
46
|
<li><code>event</code>是原生对象</li>
|
|
47
47
|
</ul>
|
|
48
|
-
<h5 id="事件修饰符，按键修饰符"><a href="#事件修饰符，按键修饰符" class="headerlink" title="事件修饰符，按键修饰符"></a>事件修饰符，按键修饰符</h5><
|
|
49
|
-
|
|
48
|
+
<h5 id="事件修饰符，按键修饰符"><a href="#事件修饰符，按键修饰符" class="headerlink" title="事件修饰符，按键修饰符"></a>事件修饰符，按键修饰符</h5><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">@click.stop.prevent</span><br><span class="line">@click.ctrl.exact</span><br></pre></td></tr></table></figure>
|
|
49
|
+
|
|
50
50
|
<h5 id="！（观察）事件被绑定到哪里"><a href="#！（观察）事件被绑定到哪里" class="headerlink" title="！（观察）事件被绑定到哪里"></a>！（观察）事件被绑定到哪里</h5><p><code>event.target</code>的值表明事件是挂在<strong>当前元素</strong>上的</p>
|
|
51
51
|
<h4 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h4><h5 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h5><p>v-model.trim</p>
|
|
52
52
|
<p>v-model.lazy</p>
|
|
@@ -188,6 +188,18 @@
|
|
|
188
188
|
<li>新增，删除 无法监听，需要用 Vue.set 和 Vue.delete</li>
|
|
189
189
|
<li>无法监听数组，需要专门处理</li>
|
|
190
190
|
</ul>
|
|
191
|
+
<h5 id="Proxy-实现响应式"><a href="#Proxy-实现响应式" class="headerlink" title="Proxy 实现响应式"></a>Proxy 实现响应式</h5><ul>
|
|
192
|
+
<li>基本使用</li>
|
|
193
|
+
<li>Reflect</li>
|
|
194
|
+
<li>实现响应式</li>
|
|
195
|
+
<li>对比 defineProperty 提高性能<ul>
|
|
196
|
+
<li>set第一层属性的时候，触发set</li>
|
|
197
|
+
<li>set第二层属性的时候触发第一层属性的get</li>
|
|
198
|
+
<li>所以在get的时候，返回一个 新的proxy对象即可 深度监听，而且是惰性监听</li>
|
|
199
|
+
<li>所以性能比defineProperty好</li>
|
|
200
|
+
</ul>
|
|
201
|
+
</li>
|
|
202
|
+
</ul>
|
|
191
203
|
<h4 id="虚拟DOM-和-diff"><a href="#虚拟DOM-和-diff" class="headerlink" title="虚拟DOM 和 diff"></a>虚拟DOM 和 diff</h4><ul>
|
|
192
204
|
<li>DOM操作非常耗性能，js是执行非常快的</li>
|
|
193
205
|
<li>vue和react是数据驱动视图</li>
|
|
@@ -321,7 +333,7 @@
|
|
|
321
333
|
<li>函数命名约定为 useXxx 格式</li>
|
|
322
334
|
<li>setup中引用 useXxx 函数</li>
|
|
323
335
|
</ul>
|
|
324
|
-
<h5 id="Proxy
|
|
336
|
+
<h5 id="Proxy-实现响应式-1"><a href="#Proxy-实现响应式-1" class="headerlink" title="Proxy 实现响应式"></a>Proxy 实现响应式</h5><ul>
|
|
325
337
|
<li>基本使用</li>
|
|
326
338
|
<li>Reflect</li>
|
|
327
339
|
<li>实现响应式</li>
|
|
@@ -410,7 +422,7 @@
|
|
|
410
422
|
<li>reconciliation 执行diff算法，纯js计算<ul>
|
|
411
423
|
<li>进行任务拆分</li>
|
|
412
424
|
<li>DOM需要渲染时暂停，空闲时恢复</li>
|
|
413
|
-
<li>window.
|
|
425
|
+
<li>window.requestIdleCallback</li>
|
|
414
426
|
</ul>
|
|
415
427
|
</li>
|
|
416
428
|
<li>commit 阶段，将diff结果渲染到dom中</li>
|
|
@@ -494,7 +506,7 @@
|
|
|
494
506
|
|
|
495
507
|
<h4 id="压缩-optimization"><a href="#压缩-optimization" class="headerlink" title="压缩 optimization"></a>压缩 optimization</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">TerserJSPlugin</span> = <span class="built_in">require</span>(<span class="string">'terser-webpack-plugin'</span>)</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">OptimizeCssAssetsplugin</span> = <span class="built_in">require</span>(<span class="string">'optimize-css-assets-webpack-plugin'</span>)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <!-- 其他配置 --></span><br><span class="line"> <span class="attr">optimization</span>: {</span><br><span class="line"> <span class="attr">minimizer</span>: [<span class="keyword">new</span> <span class="title class_">TerserJSPlugin</span>({}), <span class="keyword">new</span> <span class="title class_">OptimizeCssAssetsplugin</span>({})]</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
|
|
496
508
|
|
|
497
|
-
<h4 id="抽离公共代码"><a href="#抽离公共代码" class="headerlink" title="抽离公共代码"></a>抽离公共代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <!-- 其他配置 --></span><br><span class="line"> <span class="attr">optimization</span>: {</span><br><span class="line"> <span class="attr">minimizer</span>: [],</span><br><span class="line"> <span class="attr">splitChunks</span>: {</span><br><span class="line"> <span class="comment">// initial 不处理异步</span></span><br><span class="line"> <span class="comment">// async 只处理异步</span></span><br><span class="line"> <span class="comment">// all 全部</span></span><br><span class="line"> <span class="attr">chunks</span>: <span class="string">'all'</span>,</span><br><span class="line"> <span class="attr">cacheGroups</span>: {</span><br><span class="line"> <span class="comment">// 引用关系 关联 HtmlWebpackPlugin chunks 配置</span></span><br><span class="line"> <span class="comment">// 第三方模块</span></span><br><span class="line"> <span class="attr">vendor</span>: {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'vendor'</span>, <span class="comment">// chunk 名称</span></span><br><span class="line"> <span class="attr">priority</span>: <span class="number">1</span>, <span class="comment">// 权限更高，有限抽离，重要！</span></span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/node_modules/</span>, <span class="comment">// </span></span><br><span class="line"> <span class="attr">minSize</span>: <span class="number">0</span>, <span class="comment">// 大小限制，实际开发不要写0</span></span><br><span class="line"> <span class="attr">minChunks</span>: <span class="number">1</span>, <span class="comment">//
|
|
509
|
+
<h4 id="抽离公共代码"><a href="#抽离公共代码" class="headerlink" title="抽离公共代码"></a>抽离公共代码</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <!-- 其他配置 --></span><br><span class="line"> <span class="attr">optimization</span>: {</span><br><span class="line"> <span class="attr">minimizer</span>: [],</span><br><span class="line"> <span class="attr">splitChunks</span>: {</span><br><span class="line"> <span class="comment">// initial 不处理异步</span></span><br><span class="line"> <span class="comment">// async 只处理异步</span></span><br><span class="line"> <span class="comment">// all 全部</span></span><br><span class="line"> <span class="attr">chunks</span>: <span class="string">'all'</span>,</span><br><span class="line"> <span class="attr">cacheGroups</span>: {</span><br><span class="line"> <span class="comment">// 引用关系 关联 HtmlWebpackPlugin chunks 配置</span></span><br><span class="line"> <span class="comment">// 第三方模块</span></span><br><span class="line"> <span class="attr">vendor</span>: {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'vendor'</span>, <span class="comment">// chunk 名称</span></span><br><span class="line"> <span class="attr">priority</span>: <span class="number">1</span>, <span class="comment">// 权限更高，有限抽离，重要！</span></span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/node_modules/</span>, <span class="comment">// </span></span><br><span class="line"> <span class="attr">minSize</span>: <span class="number">0</span>, <span class="comment">// 大小限制，实际开发不要写0</span></span><br><span class="line"> <span class="attr">minChunks</span>: <span class="number">1</span>, <span class="comment">// 最少复用过几次</span></span><br><span class="line"> },</span><br><span class="line"> <span class="attr">vendor</span>: {</span><br><span class="line"> <span class="attr">name</span>: <span class="string">'common'</span>, <span class="comment">// chunk 名称</span></span><br><span class="line"> <span class="attr">priority</span>: <span class="number">0</span>, <span class="comment">// 权限更高，有限抽离，重要！</span></span><br><span class="line"> <span class="attr">minSize</span>: <span class="number">0</span>, <span class="comment">// 大小限制</span></span><br><span class="line"> <span class="attr">minChunks</span>: <span class="number">2</span>, <span class="comment">// 最少复用过几次</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure>
|
|
498
510
|
|
|
499
511
|
<h4 id="异步加载"><a href="#异步加载" class="headerlink" title="异步加载"></a>异步加载</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 定义 chunk</span></span><br><span class="line"><span class="keyword">import</span>(<span class="string">'./dynamic-data.js'</span>).<span class="title function_">then</span>(<span class="function"><span class="params">res</span> =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(res.<span class="property">default</span>.<span class="property">message</span>)</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
|
|
500
512
|
|
|
@@ -515,9 +527,7 @@
|
|
|
515
527
|
</ul>
|
|
516
528
|
<h4 id="优化babel-loader"><a href="#优化babel-loader" class="headerlink" title="优化babel-loader"></a>优化babel-loader</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.js$/</span>,</span><br><span class="line"> <span class="attr">use</span>: [<span class="string">'babel-loader?cacheDirectory'</span>], <span class="comment">// 开启缓存</span></span><br><span class="line"> <span class="attr">include</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">'src'</span>), <span class="comment">// 明确范围</span></span><br><span class="line"> <span class="comment">// 排除范围， 两者选一即可</span></span><br><span class="line"> <span class="comment">// exclude: path.resolve(__dirname, 'node_modules')</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure>
|
|
517
529
|
|
|
518
|
-
<h4 id="IgnorePlugin，直接不引入，代码中没有"><a href="#IgnorePlugin，直接不引入，代码中没有" class="headerlink" title="IgnorePlugin，直接不引入，代码中没有"></a>IgnorePlugin，直接不引入，代码中没有</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不引入所有语言包</span></span><br><span class="line"><span class="keyword">new</span> webpack.<span class="title class_">IgnorePlugin</span>(<span class="regexp">/\.\/locale/</span>, <span class="regexp">/moment/</span>)</span><br></pre></td></tr></table></figure>
|
|
519
|
-
|
|
520
|
-
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 手动引入中文</span></span><br><span class="line">moment.<span class="title function_">locale</span>(<span class="string">'zh-cn'</span>)</span><br></pre></td></tr></table></figure>
|
|
530
|
+
<h4 id="IgnorePlugin，直接不引入，代码中没有"><a href="#IgnorePlugin，直接不引入，代码中没有" class="headerlink" title="IgnorePlugin，直接不引入，代码中没有"></a>IgnorePlugin，直接不引入，代码中没有</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 不引入所有语言包</span></span><br><span class="line"><span class="keyword">new</span> webpack.<span class="title class_">IgnorePlugin</span>(<span class="regexp">/\.\/locale/</span>, <span class="regexp">/moment/</span>)</span><br><span class="line"><span class="comment">// 手动引入中文</span></span><br><span class="line">moment.<span class="title function_">locale</span>(<span class="string">'zh-cn'</span>)</span><br></pre></td></tr></table></figure>
|
|
521
531
|
|
|
522
532
|
<h4 id="noParse，引入，但不打包"><a href="#noParse，引入，但不打包" class="headerlink" title="noParse，引入，但不打包"></a>noParse，引入，但不打包</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">modules.<span class="property">exports</span>={</span><br><span class="line"> <span class="attr">module</span>: {</span><br><span class="line"> <span class="attr">noParse</span>: [<span class="regexp">/react\.min\.js/</span>],</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> {}</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br></pre></td></tr></table></figure>
|
|
523
533
|
|
|
@@ -611,7 +621,8 @@
|
|
|
611
621
|
<li>污染全局环境，使用babel-runtime解决</li>
|
|
612
622
|
</ul>
|
|
613
623
|
<p>。babelrc中</p>
|
|
614
|
-
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br
|
|
624
|
+
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">plugins: [</span><br><span class="line"> [</span><br><span class="line"> "@babel/plugin-transform-runtime",</span><br><span class="line"> {</span><br><span class="line"> "absoluteRuntime": false,</span><br><span class="line"> "corejs": 3,</span><br><span class="line"> "helpers": true,</span><br><span class="line"> "regenerator": true,</span><br><span class="line"> "useESModules": false</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">]</span><br><span class="line"></span><br></pre></td></tr></table></figure>
|
|
625
|
+
</div><iframe src="/donate/?AliPayQR=https://store.xuehuayu.cn/store/public/alipay_qr.jpg&WeChatQR=https://store.xuehuayu.cn/store/public/wechat_qr.png&UnionPayQR=null&GitHub=null&BTCQR=null&BTCKEY=null&PayPal=https://www.paypal.com/paypalme/OrdinaryPerson" style="overflow-x:hidden; overflow-y:hidden; border:0xp none #fff; min-height:240px; width:100%;" frameborder="0" scrolling="no"></iframe><div><ul class="post-copyright"><li class="post-copyright-author"><strong>本文作者：</strong>雪花雨</li><li class="post-copyright-link"><strong>本文链接：</strong><a href="/article/9c3c56c.html">https://xuehuayu.cn/article/9c3c56c.html</a></li><li class="post-copyright-license"><strong>版权声明：</strong>① 标为原创的文章为博主原创，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接。② 转载文章来自网络，已标明出处，<a href="mailto:cainiaoblog@126.com">侵删</a>。</li></ul></div><br><div class="tags"></div><div class="post-nav"><a class="next" href="/article/84c9ccd6.html">精读《SolidJS》</a></div><div id="vcomment"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.min.css"><script src="//cdn.jsdelivr.net/npm/@waline/client@v2/dist/waline.js"></script><script>const origin = window.location.origin
|
|
615
626
|
const serverURL = origin.includes('cainiaoblog') ? 'https://cmts.cainiaoblog.cn' : 'https://cmts.xuehuayu.cn'
|
|
616
627
|
const locale = {
|
|
617
628
|
placeholder: '请正确填写昵称和邮箱，方便接收回复通知~',
|