资讯专栏INFORMATION COLUMN

翻译webpack3.5.5 - code splitting - 上半部分

Bryan / 830人阅读

摘要:澄清一个共同的误解代码分离不仅仅是抽出公共代码把它们放进一个共享的块中。让我们来使用来移除这个重复的部分。插件将会注意到我们已经将分割成一个多带带的块。并且从我们的主中删除了这部分。

对于大型web app来说,如果把所有的文件都打包到一个文件中是非常低效的,特别是当一些代码块只在某些特定的条件下被调用。webpack可以让你的代码库分割成不同的块(chucks),仅仅在需要的时候再加载。其他的一些打包工具叫它们图层(layers), 卷(rollups) 或者 片段(fragments),这些特性被叫做代码分离(code splitting)。
这是一个可选的属性。你可以在你的代码库中定义分割点。webpack能帮你管理好依赖,输出文件和运行时。
澄清一个共同的误解:代码分离(code splitting)不仅仅是抽出公共代码把它们放进一个共享的块(chuck)中。更重要的特性是代码分离(code splitting)可以将代码分割成按需加载的块。这可以使项目初始化的时候只需要加载很少的代码,当应用请求的时候再按需加载代码。
有三种常用的代码分离方法:

入口起点: 使用entry选项手动分离代码

防止重复: 使用 CommonsChuckPlugin 来去重和分离代码

动态导入: 在模块内部通过内联函数来调用代码

入口

这是迄今为止最简单,最直观的拆分代码的方式。但是它是比较偏向手动并且有一些陷阱需要我们去注意的。看一看我们是怎么样从主buddle中分割其他模块的。

project

</>复制代码

  1. webpack-demo
  2. |- package.json
  3. |- webpack.config.js
  4. |- /dist
  5. |- /src
  6. |- index.js
  7. + |- another-module.js
  8. |- /node_modules
another-module.js

</>复制代码

  1. import _ from "lodash";
  2. console.log(
  3. _.join(["Another", "module", "loaded!"], " ")
  4. );
webpack.config.js

</>复制代码

  1. const path = require("path");
  2. const HTMLWebpackPlugin = require("html-webpack-plugin");
  3. module.exports = {
  4. entry: {
  5. index: "./src/index.js",
  6. another: "./src/another-module.js"
  7. },
  8. plugins: [
  9. new HTMLWebpackPlugin({
  10. title: "Code Splitting"
  11. })
  12. ],
  13. output: {
  14. filename: "[name].bundle.js",
  15. path: path.resolve(__dirname, "dist")
  16. }
  17. };

这将会产生下面的build结果:

</>复制代码

  1. Hash: 309402710a14167f42a8
  2. Version: webpack 2.6.1
  3. Time: 570ms
  4. Asset Size Chunks Chunk Names
  5. index.bundle.js 544 kB 0 [emitted] [big] index
  6. another.bundle.js 544 kB 1 [emitted] [big] another
  7. [0] ./~/lodash/lodash.js 540 kB {0} {1} [built]
  8. [1] (webpack)/buildin/global.js 509 bytes {0} {1} [built]
  9. [2] (webpack)/buildin/module.js 517 bytes {0} {1} [built]
  10. [3] ./src/another-module.js 87 bytes {1} [built]
  11. [4] ./src/index.js 216 bytes {0} [built]

还记得我们提到的那些陷阱嘛?

如果入口文件中有任何重复的模块,它们都会被包含在这些入口文件中。

它是不灵活的并且不能用内在的应用逻辑来动态分割代码。

这两点中的第一点绝对是我们例子的中的问题。像lodash也在./src/index.js中被导入,所以它会在两个bundle中重复。让我们来使用CommonsChunkPlugin来移除这个重复的部分。

阻止重复

CommonsChunkPlugin插件允许我们抽出共同的依赖放在一个存在的入口chunk或者一个存在的new chunk里。让我们使用这个插件去除上一个例子中重复的lodash依赖。

</>复制代码

  1. const path = require("path");
  2. + const webpack = require("webpack");
  3. const HTMLWebpackPlugin = require("html-webpack-plugin");
  4. module.exports = {
  5. entry: {
  6. index: "./src/index.js",
  7. another: "./src/another-module.js"
  8. },
  9. plugins: [
  10. new HTMLWebpackPlugin({
  11. title: "Code Splitting"
  12. + })
  13. + }),
  14. + new webpack.optimize.CommonsChunkPlugin({
  15. + name: "common" // Specify the common bundle"s name.
  16. + })
  17. ],
  18. output: {
  19. filename: "[name].bundle.js",
  20. path: path.resolve(__dirname, "dist")
  21. }
  22. };

在这里使用commonsChunkPlugin,我们将会看到重读的依赖会从我们的index.bundle.js文件中移除。插件将会注意到我们已经将loadash分割成一个多带带的块。并且从我们的主bundle中删除了这部分。让我们运行npm run bulid来看看它是否起作用了。

</>复制代码

  1. Hash: 70a59f8d46ff12575481
  2. Version: webpack 2.6.1
  3. Time: 510ms
  4. Asset Size Chunks Chunk Names
  5. index.bundle.js 665 bytes 0 [emitted] index
  6. another.bundle.js 537 bytes 1 [emitted] another
  7. common.bundle.js 547 kB 2 [emitted] [big] common
  8. [0] ./~/lodash/lodash.js 540 kB {2} [built]
  9. [1] (webpack)/buildin/global.js 509 bytes {2} [built]
  10. [2] (webpack)/buildin/module.js 517 bytes {2} [built]
  11. [3] ./src/another-module.js 87 bytes {1} [built]
  12. [4] ./src/index.js 216 bytes {0} [built]

这里有一些社区提供的分割代码的插件和加载器:

ExtractTextPlugin: 用来从主程序中分割出css

bundle-loader: 用来分离代码并且懒加载结果bundles

Promise-loader: 和bundle-loader作用相同,但是它是使用promise
CommonsChunkPlugin使用explicit vendor chunks从核心应用代码中来分离vendor模块

动态导入

当涉及到动态分割的时候,有两种相似的技术被支持。第一个并且也是更完满的方法是使用遵循ECMAScript规范的import语法来进行动态导入。更老的一种是,webpack特殊的方法require.ensure。让我们来试一试使用第一种方法。
import调用使用promise,如果你想在不支持promise的老旧浏览器上使用,请引入一个promise polyfill。
在我们开始之前,让我们移除这个多余的entry和commonsChunkPlugin 从我们的配置文件中。因为它们在接下来的教学中已经不再需要了。
webpack.config.js

</>复制代码

  1. const path = require("path");
  2. - const webpack = require("webpack");
  3. const HTMLWebpackPlugin = require("html-webpack-plugin");
  4. module.exports = {
  5. entry: {
  6. + index: "./src/index.js"
  7. - index: "./src/index.js",
  8. - another: "./src/another-module.js"
  9. },
  10. plugins: [
  11. new HTMLWebpackPlugin({
  12. title: "Code Splitting"
  13. - }),
  14. + })
  15. - new webpack.optimize.CommonsChunkPlugin({
  16. - name: "common" // Specify the common bundle"s name.
  17. - })
  18. ],
  19. output: {
  20. filename: "[name].bundle.js",
  21. + chunkFilename: "[name].bundle.js",
  22. path: path.resolve(__dirname, "dist")
  23. }
  24. };

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

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

相关文章

  • webpack2.x 代码分离文档 翻译

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

    Scott 评论0 收藏0
  • webpack2.x 中文文档 翻译 之 分离库代码Code Splitting - Librari

    摘要:浏览器需要重新下载打包后的文件,即使文件的绝大部分都没有变化。分离并且以来命名新的入口能够缓和当前的问题。现在运行绑定的检查结果是只是被绑定到这个绑定文件中。 分离库代码Code Splitting - Libraries 这个在webpack2.x中文网已存在,点击这里 让我们想一个简单的应用——momentjs,他是一个事件格式化的库。安装moment. npm install -...

    elva 评论0 收藏0
  • 翻译】基于 Create React App路由4.0的异步组件加载(Code Splitting

    摘要:基于路由的异步组件加载本文章是一个额外的篇章,它可以在你的中,帮助加快初始的加载组件时间。但是,我们静态地在顶部导入路由中的所有组件。当然我们的程序是相当小的,并且分离在各个部分的小组件,是不需要这样子按需加载的。 基于 Create React App路由4.0的异步组件加载 本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间。当然这个操作不是完全必...

    fredshare 评论0 收藏0
  • 程序员的算法趣题Q51: 同时结束的沙漏

    摘要:结合上下文猜测应该是说沙子同时漏完的意思。问题的焦点在于如何表示不同的排列状态以及如何处理沙漏翻转。上一篇完美洗牌完美洗牌下一篇糖果恶作剧本系列总目录参见程序员的算法趣题详细分析和全解程序员的算法趣题详细分析和全解 目录 1. 问题描述 1.1 原题的表述 2. 解题分析 2.1 转换为线...

    bovenson 评论0 收藏0

发表评论

0条评论

Bryan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<