webpack学习（四）— code splitting

lsxiao 发布于2019-08-21 14:46 / 2679人阅读

摘要：支持定义分割点，通过进行按需加载。若按照中做，则会造成通用模块重复打包。下文将详细说明。同样是利用和来处理的。如下在中添加入口其中模块为通用功能模块在中对应和这样则会打包出和两个文件。为通用功能模块。希望有更好方案的同学能够不吝赐教。

什么是code splitting

首先说，code splitting指什么。我们打包时通常会生成一个大的bundle.js(或者index,看你如何命名)文件，这样所有的模块都会打包到这个bundle.js文件中，最终生成的文件往往比较大。code splitting就是指将文件分割为块(chunk)，webpack使我们可以定义一些分割点(split point)，根据这些分割点对文件进行分块，并实现按需加载。

code splitting的意义

第三方类库多带带打包。由于第三方类库的内容基本不会改变，可以将其与业务代码分离出来，这样就可以将类库代码缓存在客户端，减少请求。

按需加载。webpack支持定义分割点，通过require.ensure进行按需加载。

通用模块多带带打包。我们代码中可能会有一些通用模块，比如弹窗、分页、通用的方法等等。其他业务代码模块常常会有引用这些通用模块。若按照2中做，则会造成通用模块重复打包。这时可以将通用模块多带带打包出来。

下文将详细说明。

如何进行code spliting 第三方类库

我们项目中常常会用到一些第三方的类库，比如jquery,bootstrap等。可以配置多入口来将第三方类库多带带打包，如下：

//在entry中添加入口
entry: {
    index: "./index",
    vendor: ["jquery", "bootstrap"]
},

//在plugins中配置
plugins: [
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js"),
]

说明
CommonsChunkPlugin提供两个参数，第一个参数为对应的chunk名（chunk指文件块，对应entry中的属性名），第二个参数为生成的文件名。
这个插件做了两件事：

将vendor配置的模块（jquery,bootstrap）打包到vendor.bundle.js中。

将index中存在的jquery, bootstrap模块从文件中移除。这样index中则只留下纯净的业务代码。

按需加载

以基于backbone的单页面应用为例，可以在router中进行配置实现按需加载，如下：

router.js

var Router = Backbone.Router.extend({
    routes: {
        "a": "a",
        "b": "b"
    },
    
    a: function() {
        require.ensure(["./a"], (require) => {
            let a = require("./a");
            //do something
        })
    },
    
    b: function() {
        require.ensure(["./b"], (require) => {
            let b = require("./b");
            //do something
        })
    }
})

说明
如上方式将打出两个文件，a.js和b.js（当然名字会有所不同），且为按需加载。只有在访问a时，a.js才会被加载，b同理。但是这种做法存在两个问题：

若路由分配不合理，会打包出很多很小的文件，每个文件或许只有几k，却多了很多网络请求，得不偿失。

会造成通用模块的重复打包，比如a模块和b模块都引用了c模块，

a
import "c" from "./c"

b
import "c" from "./c"

这样我们会发现打包出的a.js和b.js中都包含c模块的代码，造成了代码冗余。

对于问题1，可以通过webpack提供的插件来解决：

//在plugins中添加该插件：
plugins: [
    new webpack.optimize.AggressiveMergingPlugin()
]

对于问题2:
可以按照下文中所说方式解决。

通用模块打包

这个问题我再网上查阅了一些资料，没有发现特别好的方案，以下所述为自己的一些尝试，但是也并非最优解，希望有更好解决方案的同学能够指出。

同样是利用entry和commonsChunkPlugin来处理的。如下：

//在entry中添加入口
entry: {
    index: "./index",
    common: ["./c", "./d"],  //其中c,d模块为通用功能模块
    vendor: ["jquery", "bootstrap"]
},

//在plugin中
plugins: [
    new webpack.optimize.CommonsChunkPlugin(["common", "vendor"], "[name].js")  //[name]对应"common"和"vendor"
]

这样则会打包出common.js和vendor.js两个文件。common为通用功能模块。

但是这种方式在项目依赖复杂情况下的效果还是不太理想，无法做到某段代码只加载一次。
希望有更好方案的同学能够不吝赐教。

（本文完）

云服务器 GPU云服务器 code-split 深度学习四五四青年学习主机 Splitting

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

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

webpack2.x 代码分离文档翻译

摘要：代码分离代码分离是最受瞩目的功能。下面有两种代码分离的技术。使用实现代码分离是使用的方式实现静待资源异步调用。通过添加，我们可以在代码中打一个分离点，可以以此建立一个独立的包，包含这个点的所有代码。代码分离(Code Splitting) 代码分离是webpack最受瞩目的功能。它允许你把你的代码分成不同的部分分开打包，然后实现在需要的时候再进行加载（按需加载提高速度）————例如用...

Scott 2019-08-21 15:18 评论0 收藏0
webpack Code Splitting浅析

摘要：不知大家是不是跟大雄一样之前从未看过编译产出的代码。前文大雄给了一个粗陋的动态加载的方法说白了就是动态创建标签。大雄看完至少大概知道了原来编出来的代码是那样执行的原来可以那么灵活的使用。 Code Splitting是webpack的一个重要特性，他允许你将代码打包生成多个bundle。对多页应用来说，它是必须的，因为必须要配置多个入口生成多个bundle；对于单页应用来说，如果只打包...

Amos 2019-08-23 17:12 评论0 收藏0
2017-06-28 前端日报

摘要：前端日报精选我是如何实现的在线升级热更新功能的张鑫旭鑫空间鑫生活翻译表单的运用第期晋升评审的套路异步编程的四种方式黄博客精选组件设计和分解思考掘金中文译使登录页面变得正确掘金前端从强制开启压缩探究插件运行机制掘金个常用的简 2017-06-28 前端日报精选我是如何实现electron的在线升级热更新功能的？ « 张鑫旭-鑫空间-鑫生活【翻译】React 表单： Refs 的运用【...

QLQ 2019-08-20 17:36 评论0 收藏0
Webpack 的 Bundle Split 和 Code Split 区别和应用

摘要：当然，上面的定时器完全可以换成其他诸如按钮点击之类的事件来触发。 Webpack Bundle Split 和 Code Split 话说之前也是对 chunk 这个概念有些模糊，并且很多时候网上的文章大部分在将代码分离动态加载之类的。写这篇文章的目的也是想让其他那些跟我一样曾经对这个概念不是很清楚的童鞋有个清晰的认识。废话不多说，撸起袖子直接干！ Lets Dive in！ Webp...

jimhs 2019-08-23 14:43 评论0 收藏0
翻译webpack3.5.5 - code splitting - 上半部分

摘要：澄清一个共同的误解代码分离不仅仅是抽出公共代码把它们放进一个共享的块中。让我们来使用来移除这个重复的部分。插件将会注意到我们已经将分割成一个单独的块。并且从我们的主中删除了这部分。对于大型web app来说，如果把所有的文件都打包到一个文件中是非常低效的，特别是当一些代码块只在某些特定的条件下被调用。webpack可以让你的代码库分割成不同的块(chucks),仅仅在需要的时候再加载...

Bryan 2019-08-20 18:54 评论0 收藏0