代码分离特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间。

有三种常用的代码分离方法:

  • 入口起点:使用 entry 配置手动地分离代码。
  • 防止重复:使用 CommonsChunkPlugin 去重和分离 chunk。
  • 动态导入:通过模块的内联函数调用来分离代码。

1. 入口起点(entry points)

这是迄今为止最简单、最直观的分离代码的方式。不过,这种方式手动配置较多,并有一些陷阱,我们将会解决这些问题。先来看看如何从 main bundle 中分离另一个模块:

正如前面提到的,这种方法存在一些问题:

  • 如果入口 chunks 之间包含重复的模块,那些重复模块都会被引入到各个 bundle 中。
  • 这种方法不够灵活,并且不能将核心应用程序逻辑进行动态拆分代码。

2. 防止重复(prevent duplication)

    CommonsChunkPlugin 插件可以将公共的依赖模块提取到已有的入口 chunk 中,或者提取到一个新生成的 chunk。让我们使用这个插件,将之前的示例中重复的 lodash 模块去除:

3. 动态导入(dynamic imports)

当涉及到动态代码拆分时,webpack 提供了两个类似的技术。对于动态导入,第一种,也是优先选择的方式是,使用符合 ECMAScript 提案 的 import() 语法。第二种,则是使用 webpack 特定的 require.ensure。让我们先尝试使用第一种……

在我们开始本节之前,先从配置中移除掉多余的 entry 和 CommonsChunkPlugin,因为接下来的演示中并不需要它们:

src/index.js:

在注释中使用了 webpackChunkName。这样做会导致我们的 bundle 被命名为 lodash.bundle.js ,而不是 [id].bundle.js 。

webpack学习之—— Code Spliting(代码分离)的更多相关文章

  1. 【webpack学习笔记】a07-代码分离

    官方文档说进行代码分离有三种方法: 入口起点:使用entry配置手动分离. 防止重复:使用CommonsChunkPlugin插件去重合分离chunk 注:在webpack4中,CommonsChun ...

  2. webpack学习笔记--提取公共代码

    为什么需要提取公共代码 大型网站通常会由多个页面组成,每个页面都是一个独立的单页应用. 但由于所有页面都采用同样的技术栈,以及使用同一套样式代码,这导致这些页面之间有很多相同的代码. 如果每个页面的代 ...

  3. webpack学习_webpack-dev-server自动编译代码

    之前每次修改完之后都要执行npm run build来编译,下面有三种方式可以实现代码变化后自动编译代码,下面只重点说webpack-dev-server,其他的请看webpack开发文档 1.web ...

  4. webpack指南(二)code spliting+懒加载

    code spliting 把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件. 代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大缩减加载时 ...

  5. 使用Webpack的代码分离实现Vue懒加载(译文)

    当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将Vue Components,routes或Vuex的代码进行分离并按需加载,会极大的提高App的首屏加载速度. 在Vue的 ...

  6. 使用Webpack的代码分离实现Vue懒加载

    当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将Vue Components,routes或Vuex的代码进行分离并按需加载,会极大的提高App的首屏加载速度. 在Vue的 ...

  7. Webpack 代码分离

    Webpack 代码分离 代码分离是 webpack 中最引人注目的特性之一. 你可以把你的代码分离到不同的 bundle 中,然后你就可以去按需加载这些文件. 总的来说, webpack 分离可以分 ...

  8. webpack代码分离 ensure 看了还不懂,你打我(转)

    webpack异步加载的原理 webpack ensure相信大家都听过.有人称它为异步加载,也有人说做代码切割,那这 个家伙到底是用来干嘛的?其实说白了,它就是把js模块给独立导出一个.js文件的, ...

  9. react-router 4实现代码分割(code spliting)

    官方一开始推荐的使用bundle-loader来做代码分割的方式感觉有点麻烦,而且代码看起来有点不舒服.而且需要一直依赖bunder-loader 一开始我想为什么不能像vue一样,直接使用ES的新特 ...

随机推荐

  1. 报错C1189 #error: "No Target Architecture"

    根本原因: 是因为单独包含了一些windows.h已经包含了的头文件如"fileapi.h","WinUser.h",但是却没有包含windows.h 或者先包 ...

  2. 《DSP using MATLAB》Problem 7.36

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  3. 04_Hibernate检索方式

    一.Hibernate检索方式概述 OID检索方式:按照对象的OID来检索对象(get/load) HQL检索方式:使用面向对象的HQL查询语言 QBC检索方式:使用QBC(Query By Crit ...

  4. Range的范围

    range(N,M)的范围应为: [N,M) 例如:

  5. spring_配置处理器对象、处理器映射器、处理器适配器、视图解析器

    创建spring配置文件:application-context.xml. 创建处理器类 package com.lanou.demo.controller;public class BookCont ...

  6. Python之MySQL语法(增删改查)

    -- ID: 新闻的唯一标示 -- title: 新闻的标题 -- content: 新闻的内容 -- created_at: 新闻添加的时间 -- types: 新闻的类型 -- image: 新的 ...

  7. css的书写位置+元素分类

    1.css的书写位置 1>行内样式: <span style="color:red;">haha</span> 2>内部样式 在style标签中 ...

  8. JS实现数据双向绑定

    本文参考https://www.cnblogs.com/tianhaining/p/8425345.html 首先先说个面试题哈,就是vue中的v-model是如何实现双向数据绑定的咳咳,下面开始背诵 ...

  9. 20191005 - New Beginning

    真·反思 Before 发现$T1$是约瑟夫,$T2$不清楚,$T3$是算法进阶上的$LCIS$ During得&失 做的不错的地方: 多少想了T1的优化(最后没打完). T3的暴力写得很快也 ...

  10. ac68u、r8500 梅林固件扩展为一个小型 linux 系统

    事先刷 merlin 固件 1.安装 Entware 在安装之前,你需要在路由器中插入一个 U 盘,并将其格式化为 Ext3 / Ext4 格式,插上后在 /mnt/ 下应会多个 sda 设备出来 e ...