脚本宝典收集整理的这篇文章主要介绍了Webpack 构建后文件变得很大?,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
上一篇回顾使用 Webpack 的动机,比较理论,本篇侧重实用。
这几篇文章的前提是 Webpack 已经入门。若无,请自行到 Webpack 官方网站的 getting start 按指引一步步实操。
啃先生(MrKenniu) | 文
使用 Webpack 打包,前端工程师可以按 CommonJS 或 ES6 Module 的规范写前端 JS 代码,使模块源代码看起来跟后端代码一样简洁,但是,很快发现文件太大(尤其基于 React 进行开发的应用,如果是单页面程序?更大了),为了解决问题,以下是我每次必用的策略:
本篇总结 按需加载 的用法
Code Split 概念
Webpack 支持多种模块加载方式。CommonJS 的 require 和 ES6 的 import 是同步加载的,通过这些方式引入的依赖会被 Webpack 打包在一起,文件因而变大。而 amD 或 CommonJS 的 require.ensure 是按需加载「异步的」,对于一些可以延迟加载的模块「依赖」,应该用这种方式,从而避免文件太大。
同步加载的模块被打包在同一个 chunk 「 一个 chunk 是一个 JS 文件,由一个或若干个模块组成 」,而通过异步加载的模块被打包在另外的 chunk 里,Webpack 以此来进行分片,即 Code split。
Code Split 的方式
chunk 的内容组成
通过 Code Split 分片,新的 chunk 由异步模块和这些模块的依赖构成。这些模块的依赖按同样的规则构建,即同步加载的模块打包在同一个 chunk,异步加载的模块被切分到新的 chunk。具体看下面的例子,请注意看代码注释的内容,build 目录里的三个文件是 Webpack 打包最终生成的。
Code Split 优化
从上面的例子可见,Code Split 分出来了两个 chunk,即 1.bundle 和 2.bundle,从而减小了主 chunk bundle.js 的文件大小,减轻程序初始化的网络等待。然而,新的问题出现了,1.bundle 和 2.bundle 都包含 io 模块,可见 io 模块有冗余。带着这个问题,下一篇总结 CommonsChunkPlugin 的使用
欢迎关注我的公众号
以上是脚本宝典为你收集整理的Webpack 构建后文件变得很大?全部内容,希望文章能够帮你解决Webpack 构建后文件变得很大?所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。