Webpack 构建后文件变得很大？

2019年8月31日 181次阅读 来源: 啃先生

上一篇回忆运用 Webpack 的效果，比较理论，本篇着重有用。

这几篇文章的条件是 Webpack 已入门。若无，请自行到 Webpack 官方网站的 getting start 按指引一步步实操。

啃教师(MrKenniu) | 文

《Webpack 构建后文件变得很大？》

运用 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 的体式格局

  • AMD : require

  • CommonJS : require.ensure

  • ES : System.import

chunk 的内容组成

经由过程 Code Split 分片，新的 chunk 由异步模块和这些模块的依靠组成。这些模块的依靠按一样的划定规矩构建，即同步加载的模块打包在同一个 chunk，异步加载的模块被切分到新的 chunk。详细看下面的例子，请注意看代码解释的内容，build 目次里的三个文件是 Webpack 打包终究天生的。

《Webpack 构建后文件变得很大？》

Code Split 优化

从上面的例子可见，Code Split 分出来了两个 chunk，即 1.bundle 和 2.bundle，从而减小了主 chunk bundle.js 的文件大小，减轻顺序初始化的收集守候。但是，新的题目涌现了，1.bundle 和 2.bundle 都包括 io 模块，可见 io 模块有冗余。带着这个题目，下一篇总结 CommonsChunkPlugin 的运用

迎接关注我的民众号

《Webpack 构建后文件变得很大？》

    原文作者：啃先生
    原文地址: https://segmentfault.com/a/1190000007364512
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞