博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
webpack2.x 代码分离文档 翻译
阅读量:7143 次
发布时间:2019-06-29

本文共 920 字,大约阅读时间需要 3 分钟。

代码分离(Code Splitting)

代码分离是webpack最受瞩目的功能。它允许你把你的代码分成不同的部分分开打包,然后实现在需要的时候再进行加载(按需加载提高速度)————例如用户导航到一个匹配的路由,或者一个用户事件。

因此能够减少打包的体积,控制家在流程次序,而且如果使用得当会极大影响加载速度。
下面有两种代码分离的技术。(webpack实现)

资源分离——缓存和并行下载(Resource splitting for caching and parallel loads)

厂商代码分立(Vendor code splitting)

传统的一些应用以来一些第三方的库或者功能,不同于应用本身的代码,这些第三方库的代码不是经常变动的。

如果我们把这些第三方的代码放在一块,从应用代码中分离出来,这样我们可以利用用户的电脑的缓存机制来缓存这些需要长时间存在的文件。

为了实现这个目的,给第三方的包打上指纹(hash)来保持不变,以区别应用代码的经常变化。查看学习ChommonsChunkPlugin插件。

css 分离(css splitting)

也许你想把你的css文件独立出主应用逻辑来打包。这个加强了你的缓存能力,实现styles和主应用代码并行下载,避免出现FOUC(flash of unstyled content也就是先下载了一大堆无样式的文档,然后渲染样式的情况)

学习 使用ExtractTextWebpackPlugin.

按需分离(On demand code-splitting)

然而刚开始的那种资源代码分离,要求我们在配置之前明确设定分离点,也可以在应用代码中动态的创建异步分离点。

使用require.ensure()实现代码分离(Code splitting with require.ensure())

require.ensure()是使用CommonJS的方式实现静待资源异步调用。通过添加require.ensure([<fileurl>]),我们可以在代码中打一个分离点,webpack可以以此建立一个独立的包,包含这个点的所有代码。

学习 使用require.ensure().

转载地址:http://btwgl.baihongyu.com/

你可能感兴趣的文章
Linux LVM硬盘管理及LVM扩容
查看>>
针对某个数据库error做systemstate dump
查看>>
iOS开发--SWRevealViewController
查看>>
JSP--百度百科
查看>>
TCP/IP详解学习笔记(2)-数据链路层
查看>>
VMware+Windgb+Win7内核驱动调试
查看>>
initWithFrame、initWithCoder、awakeFromNib的区别和调用次序 & UIViewController生命周期 查缺补漏...
查看>>
客户端请求新页面
查看>>
VMware安装CentOS时,无法以图形界面安装解决办法
查看>>
SpringMvc文件资源防止被外链链接
查看>>
Spring 4 官方文档学习(十一)Web MVC 框架
查看>>
使用 Spring Boot 快速构建 Spring 框架应用--转
查看>>
Quartz 2D
查看>>
Eclipse 快捷键
查看>>
VC++ 设置软件开机自启动的方法
查看>>
MyBatis学习(三)、动态SQL语句
查看>>
PLSQL:[1]plsql中文乱码,显示问号
查看>>
将十进制转成十六进制
查看>>
【题目】英文字符进行频率的统计,直方图输出
查看>>
Ztree手风琴效果(第三版)
查看>>