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方法

目录
相关文章
|
4月前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> webpack代码压缩
《Webpack5 核心原理与应用实践》学习笔记-> webpack代码压缩
41 0
|
9月前
|
缓存 前端开发 JavaScript
学会用Webpack搭建开发环境并打包代码
学会用Webpack搭建开发环境并打包代码
学会用Webpack搭建开发环境并打包代码
|
10月前
|
存储 JavaScript 编译器
TypeScript(一) —— 进阶(TypeScript 中的类型、编译选项及使用 webpack 打包 ts 代码)
TypeScript(一) —— 进阶(TypeScript 中的类型、编译选项及使用 webpack 打包 ts 代码)
200 0
|
10月前
|
缓存 JavaScript 前端开发
从 Vue 转换看 Webpack 和 Vite 代码转换机制的差异
从 Vue 转换看 Webpack 和 Vite 代码转换机制的差异
117 0
|
JavaScript
【TypeScript教程】# 6:使用webpack打包ts代码
【TypeScript教程】# 6:使用webpack打包ts代码
160 0
【TypeScript教程】# 6:使用webpack打包ts代码
|
JavaScript 前端开发
webpack优化篇(四十四):多进程并行压缩代码
webpack优化篇(四十四):多进程并行压缩代码
149 0
webpack优化篇(四十四):多进程并行压缩代码
|
XML 缓存 JSON
webpack(一)——资源模块,loader,代码分离,缓存
安装webpack 安装webpack需要两个主包,在Vscode上新建一个文件夹,在终端打开, 输入node -v检测是否安装了nodejs 输入npm -v 输入npm install webpack webpack-cli --global安装webpack,会产生一个文件package.json 输入命令webpack -v是否安装成功
110 0
webpack(一)——资源模块,loader,代码分离,缓存
|
JavaScript
webpack进阶篇(二十三):代码分割和动态import
webpack进阶篇(二十三):代码分割和动态import
191 0
webpack进阶篇(二十三):代码分割和动态import
|
JavaScript 前端开发
webpack基础篇(十三):代码压缩
webpack基础篇(十三):代码压缩
125 0
webpack基础篇(十三):代码压缩
|
JavaScript
如何使用 webpack 打包TypeScript 代码
在终端使用 npm init -y 对项目进行初始化,会产生一个 package.json 文件。
193 0
如何使用 webpack 打包TypeScript 代码