webpack4 基础

假期没有出去玩,但是我觉得很充实吼/(ㄒoㄒ)/~~

根据Sean在 frontend masters上的课程加上个人的理解 Sean 是 webpack 的核心贡献者哦?课程代码

为什么要使用webpack

传统方法在浏览器中执行JS

  1. 一个功能加载一个script 标签 e.g. Jquery , Swiper
  2. 加载一个巨大的JS文件。

script标签加载的弊端

  1. 扩展性太差,标签很多的情况下维持标签的顺序很痛苦。
  2. 全局变量污染
  3. 加载过多的JS文件有加载性能问题,因为浏览器的并行连接数有限制。可以参考html - Max parallel http connections in a browser? - Stack Overflow

单独一个JS文件的弊端

这里应该是说所有代码写在一起,不是按照模块组织最后打包出一个文件来的。

  1. 不同功能的作用域问题
  2. 用户需要加载的文件过大。
  3. 维护性和可读性很差。

立即执行函数IIFEs

Immediately invoked function expressions

var outerScope = 1;
const whatever = (function(dataNowUsedInside) {
  var outerScope = 4;
  return {
    someAttribute: "you want"
  };
})(1);
console.log(outerScope);  //1
复制代码

立即执行函数可以解决作用域冲突的问题,如上因为函数作用域的存在不会污染外部作用域。 PS: 另外上面的这个暴露出一个模块的模式叫Revealing Module pattern 可以参考 Learning JavaScript Design Patterns

Make, Gulp, Grunt, Broccoli , Brunch 这些工具通过一个文件当做一个立即执行函数,将这些立即执行函数连接起来打包成一个文件。

这些工具的弊端:

  1. 每次更改一个文件都要重新构建所有文件
  2. 无法剔除没有使用过的代码,比如引入Lodash, 就用了几个函数,结果500Kb的文件都被引入了。
  3. 立即执行函数过多的话可能会造成性能问题。 参考这篇文章The cost of small modules | Read the Tea Leaves。文章里提到一个是函数内嵌套函数,还有在关联数组中查看模块在模块越来越多的情况下会暴露出意外的性能问题。另外立即执行函数会导致引擎立刻解析函数 (eager parse),大量的立即执行函数也会导致应用解析变慢。
  4. 没法做懒加载。

Javascript模块优缺点

CommonJS

node里没有

你可能感兴趣的:(webpack4 基础)