Webpack 构建后文件变得很大？

Barry_Ng 发布于2019-08-21 14:41 / 2468人阅读

摘要：的和的是同步加载的，通过这些方式引入的依赖会被打包在一起，文件因而变大。而或的是按需加载异步的，对于一些可以延迟加载的模块依赖，应该用这种方式，从而避免文件太大。

上一篇回顾使用 Webpack 的动机，比较理论，本篇侧重实用。

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

啃先生(MrKenniu) | 文

使用 Webpack 打包，前端工程师可以按 CommonJS 或 ES6 Module 的规范写前端 JS 代码，使模块源代码看起来跟后端代码一样简洁，但是，很快发现文件太大（尤其基于 React 进行开发的应用，如果是单页面程序？更大了），为了解决问题，以下是我每次必用的策略：

按需加载「 Code Split 」

提取公共代码「 CommonsChunkPlugin 」

第三方库分开打包「 DllPlugin 」

代码压缩「 UglifyJSPlugin 」

本篇总结 按需加载 的用法

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 打包最终生成的。

Code Split 优化

从上面的例子可见，Code Split 分出来了两个 chunk，即 1.bundle 和 2.bundle，从而减小了主 chunk bundle.js 的文件大小，减轻程序初始化的网络等待。然而，新的问题出现了，1.bundle 和 2.bundle 都包含 io 模块，可见 io 模块有冗余。带着这个问题，下一篇总结 CommonsChunkPlugin 的使用

欢迎关注我的公众号

云服务器 GPU云服务器 js文件后删除文件上传文件后返回文件大小 java后文件文件导出后变aspx

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87991.html

webpack打包分析与性能优化

摘要：打包分析与性能优化背景在去年年末参与的一个项目中，项目技术栈使用，生产环境全量构建将近三分钟，项目业务模块多达数百个，项目依赖数千个，并且该项目协同前后端开发人员较多，提高构建效率，成为了改善团队开发效率的关键之一。 webpack打包分析与性能优化背景在去年年末参与的一个项目中，项目技术栈使用react+es6+ant-design+webpack+babel，生产环境全量构建将...

joy968 2019-08-20 14:21 评论0 收藏0
webpack的优化

摘要：优化在我们构建单页面应用或封装插件时很大机会用到这个的打包工具但项目代码日益增多时一些简单的配置会暴露种种弊端打包时间长代码大以下是结合自身开发和学习过程解决问题的总结打包时间长很多人都知道这个插件是用来提取公共库的但这个插件也解决不了公共 webpack优化在我们构建单页面应用(vue, React)或封装插件时,很大机会用到webpack,这个JavaScript的打包工具.但项...

hatlonely 2019-08-26 11:47 评论0 收藏0
React文档翻译系列（一）安装

摘要：文档翻译系列一安装原文地址原文本系列是针对文档进行的翻译，因为自己在学习的时候，最开始通过看博客或者论坛等中文资料，有些内容是零零散散的接收，并没有给自己带来很好的效果，所以后来决定把文档的原文从头到尾看一遍。 React文档翻译系列（一）安装原文地址：原文本系列是针对React文档进行的翻译，因为自己在学习react的时候，最开始通过看博客或者论坛等中文资料，有些内容是零零散散的...

Fourierr 2019-08-20 15:28 评论0 收藏0
Webpack系列-第一篇基础杂记

摘要：系列文章系列第一篇基础杂记系列第二篇插件机制杂记系列第三篇流程杂记前言公司的前端项目基本都是用来做工程化的，而虽然只是一个工具，但内部涉及到非常多的知识，之前一直靠来解决问题，之知其然不知其所以然，希望这次能整理一下相关的知识点。系列文章 Webpack系列-第一篇基础杂记 Webpack系列-第二篇插件机制杂记 Webpack系列-第三篇流程杂记前言公司的前端项目基本都是用...

Batkid 2019-08-23 15:21 评论0 收藏0
webpack4系列教程（九）：开发环境和生产环境

摘要：它允许在运行时更新各种模块，而无需进行完全刷新。构建生产环境开发环境和生产环境的构建目标差异很大。在开发环境中，我们需要具有强大的具有实时重新加载或热模块替换能力的和。 1. 构建开发环境如果你一直跟随我前面的博文，那么你对webpack的基础知识已经有比较深刻的理解了。之前，我们一直执行着： npm run build 来打包编译输出我们的代码，本文我们来看看如何构建一个开发环境，...

姘存按 2019-08-23 14:48 评论0 收藏0