阅读本文前需要对 Webpack Module 和 Chunk 的概念有了解。
同时也推荐对 webpack compilation 和 webpack plugin api 做一定的了解。

Chrome 通常会对未引用的 DOM 对象定期进行 GC 操作。但是在一定场景下，对 video 的 GC 操作会失效，已经创建的元素，及时已经没有对它引用的指针，依旧会常驻内存中，由此，在对 video 元素不断的销毁和创建过程中，会导致页面内存越来越大，

本文会介绍一些容易被忽视、但是非常实用的 npm 小知识点，带你从独特的角度认识每天手边常用的 npm 工具。

• 容易被忽视的 dist tag
• 耳熟能详的npm install
• node_modules 的目录组织规律

使用 webpack 进行构建，我们在混用 commonjs 和 esModule 情况下（随便引几个 node_modules 三方库，这两种规范就凑齐了），模块解析很容易出现问题，特别是再搭配各种 babel 、 polyfil 插件时，情况就更复杂了。这边拿来分析一下。

先说结论：import、export 关键字与 module.exports、exports 关键字同时出现在一个文件中时，webpack 会产生构建冲突

举一个 tree shaking 的栗子：

boy.js

1
2
3
4

// boy.js
import {logger} from '@ies/eden-util';
export const name = 'name';
export const age = 15;

由 source 命令引出的问题

假设我们有一个 shell 脚本，简单执行了一下 source 命令：
do.sh

1

source s.sh