webpack指南-webpack介绍-代码分割

简介: webpack最引人注目的特性之一就是代码分割。它让你可以分割代码成多个包以便于你根据需求载入——例如当用户浏览到某个路由或者触发某个事件时。它允许更小的包,也允许你控制资源载入优先级,如果使用恰当,可以很大程度上影响app载入时间。

webpack最引人注目的特性之一就是代码分割。它让你可以分割代码成多个包以便于你根据需求载入——例如当用户浏览到某个路由或者触发某个事件时。它允许更小的包,也允许你控制资源载入优先级,如果使用恰当,可以很大程度上影响app载入时间。

webpack主要可以完场两种代码分割:


为了缓存和并行加载的资源分割

vendor代码分割

一个典型的应用会因为框架/功能需求依赖很多第三方库。与应用代码不同,库中的代码一般不会有变动。

如果我们保持库代码在自己的包中而不是和应用代码在一起,我们让浏览器缓存机制去长时间缓存这些文件在终端机器中。

为了起作用,vendor文件名中 [hash]部分必须保持不变,而不考虑应用代码变更。参考how to split vendor/library章节使用CommonsChunkPlugin

CSS分割

你或许希望分割样式代码到各个包中,独立于应用逻辑。这样就加强了样式缓存能力并循序浏览器与应用代码同时加载样式,从而防止FOUC(flash of unstyled content)

参考how to split CSS,使用ExtractTextWebpackPlugin。

按需求分割代码

前面的分割方式要求用户预先在配置中明确分割点,但也有一种方法可以在应用代码中创建动态分割点。

This can be used for more granular chunking of code, for example, per our application routes or as per predicted user behaviour. This allows the user to load non-essential assets on demand.这也可以适用于多颗粒代码分块中,例如,应用中每一个路由或者每一个预期的用户动作。它允许用户根据需求加载非必须资源。

代码分割——使用import()-ECMAScript6方案

代码分割——使用require.ensure-通用JS方法

目录
相关文章
|
1月前
|
JavaScript 前端开发 UED
如何配置 Webpack 进行代码分离?
通过以上方法,可以有效地配置Webpack进行代码分离,根据项目的具体需求和场景选择合适的方式,能够显著提高应用的性能和用户体验。在实际应用中,还可以结合其他优化技术,进一步优化Webpack的打包结果和应用的加载速度。
52 5
|
1月前
|
缓存 JavaScript 前端开发
配置 Webpack 进行代码分离的常见方法有哪些?
通过以上常见方法,可以根据项目的具体需求和场景,灵活地配置Webpack进行代码分离,从而提高应用的性能和加载速度,优化用户体验。
35 3
|
3月前
|
前端开发 JavaScript UED
除了 Webpack,还有哪些工具可以进行代码分割?
除了 Webpack,还有哪些工具可以进行代码分割?
|
3月前
|
UED
如何通过 Webpack 实现代码分割?
如何通过 Webpack 实现代码分割?
121 0
|
7月前
说说webpack中代码分割如何实现?
说说webpack中代码分割如何实现
60 0
|
7月前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack代码压缩
《Webpack5 核心原理与应用实践》学习笔记-> webpack代码压缩
183 0
|
缓存 前端开发 JavaScript
学会用Webpack搭建开发环境并打包代码
学会用Webpack搭建开发环境并打包代码
150 0
学会用Webpack搭建开发环境并打包代码
|
前端开发
Webpack5 系列(七):代码分离2
Webpack5 系列(七):代码分离2
97 0
|
缓存 JavaScript
Webpack5 系列(七):代码分离1
Webpack5 系列(七):代码分离1
115 0
|
3月前
|
JavaScript
webpack打包TS
webpack打包TS
138 60