模块化

作者: Rememberautumn 分类: 未分类 发布时间: 2016-11-07 12:30 阅读: 2,631

什么是模块化打包

通俗来说,就是项目很大,要处理的业务逻辑很多,导致单个页面要加载众多的 js 影响性能,模块打包就是将一个个的 js 文件合并起来,当然不止这么简单。

如何打包

CommonJs,AMD,ES6 模块化

区别

CommonJS 是同步载入模块的,这对浏览器来说不是很理想,Browserify 首先会通过抽象语法树(AST)来解析代码中的每一个 require 语句,在分析完所有模块的依赖和结构之后,就会把所有的代码合并到一个文件中。

AMD 和 CommonJS 的最主要区别是AMD是异步加载模块的。这也就意味着你不是必须把所有的代码打包到一个文件里,模块加载不影响后续语句执行,逐步加载的的模块也不会导致页面阻塞无法响应。

ES6模块和CommonJS, AMD一类规范最主要的区别是,当你载入一个模块时,载入的操作实际实在编译时执行的——也就是在代码执行之前。所以去掉那些不必要的exports导出语句可以优化我们应用的性能。

Webpack

Webpack 是新推出的构建工具里最受欢迎的。它兼容CommonJS, AMD, ES6各类规范

为什么我们采用 webpack?

比如我们做单页应用,有些页面是不会被用到的,如果我们一次性加载进来,是非常浪费的,code splitting 只是 Webpack 提供的众多强大功能之一,需要 code splitting 这样的功能来实现按需加载

Rollup

Rollup 称自己为下一代打包工具,因为 Rollup 为 ES2015 模块化规范而生的。与当下流行的 CommonJS 打包规范打包工具不同,Rollup 可以直接打包符合 ES2015 模块化规范的代码,而并不需要将代码通过 Babel 转化为 CommonJS 模块化规范的形式。

不同于目前流行的打包工具,Rollup 并不会为每个模块创建独立的函数作用域,而是将所有的代码放置于同一个作用域中,这使得代码的运行更有效率。

此外,得益于 ES2015 模块化规范的静态化导入特性,Rollup 可以通过 Tree-Shaking 操作对代码进行精简,从而得到提及更小的打包代码。关于 Tree-Shaking 的介绍,可以参考这篇文章。除了 Tree-Shaking,Rollup 还支持 Bindings 和 Cycles 这类高级特性。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

一条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注