webpack2.x 中文文档翻译之分离库代码Code Splitting - Librari

elva 发布于2019-08-20 14:43 / 2650人阅读

摘要：浏览器需要重新下载打包后的文件，即使文件的绝大部分都没有变化。分离并且以来命名新的入口能够缓和当前的问题。现在运行绑定的检查结果是只是被绑定到这个绑定文件中。

分离库代码Code Splitting - Libraries

这个在webpack2.x中文网已存在，点击这里

让我们想一个简单的应用——momentjs，他是一个事件格式化的库。
安装moment.

npm install --save moment

index文件将调用moment作为依赖来记录现在时间。

index.js

var moment = require("moment");
console.log(moment().format());

我们可以用下面的配置来打包应用。

webpack.config.js

module.exports = function(env) {
    return {
        entry: "./index.js",
        output: {
            filename: "[chunkhash].[name].js`,
            path: "./dist"
        }
    }
}

在你的应用中运行webpack，然后检查打包的结果，你会发现moment和index.js被打包合并到bundle.js中了。

对于应用来说这不是我们想要的。如果index.js代码放生了变化，整个bundle.js需要重新打包一遍。浏览器需要重新下载打包后的文件，即使文件的绝大部分都没有变化。

mutilple Entries 多个文件入口。

分离moment并且以vendor来命名新的入口能够缓和当前的问题。

webpack.config.js webpack配置

module.exports = function(env) {
    return {
        entry: {
            main: "./index.js",
            vendor: "moment"
        },
        output: {
            filename: "[chunkhash].[name].js`,
            path: "./dist"
        }
    }
}

运行webpack，你会发现两个被打包的文件被输出。如果你检查的话会发现，moment在这两个文件中都存在。

CommonsChunkPlugin

这是一个非常复杂的插件。他的重要功能从不同的bundle文件中摘除相同的模块，然后绑定到一个bundle文件中。
如果一个公共bundle文件不存在，那么就会创建一个。

我们可如下修改配置文件来使用CommonsChunkPlugin插件。

var webpack = require("webpack");
module.exports = function(env) {
    return {
        entry: {
            main: "./index.js",
            vendor: "moment"
        },v
        output: {
            filename: "[chunkhash].[name].js`,
            path: "./dist"
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: "vendor" // Specify the common bundle"s name.
            })
        ]
    }
}

现在运行webpack,绑定的检查结果是moment只是被绑定到vendor这个绑定文件中。

Manifest file（证明文件）

应该注意到，如果我们改变应用的代码，然后运行webapck，将会发现vendor绑定文件的也发生了变化。
即使vendor和main两个绑定的问价是分开执行绑定的，一个变化另一个没有变化会导致两个文件的hash
都发生变化。这说明我们还是没有获得浏览器缓存文件的好处，因为文件的hash导致名字都发生了变化。因此他们都会重新下载。

这种问题会出现每次buil的时候。webpack生成一些webpack运行码，它帮助webpack做它的事。当只有一个
bundle绑定文件时，运行码在他的内部。但是有多个bundle被生成时，他在common build中，也就是vendor文件中。

为了解决这个问题，我们需要摘出来一个文件专门存放运行码，这个文件是mainifest file。通过每次创建一个其他的文件--manifest，在它的前面是一大堆我们需要缓存的文件，在vendor中。

webpack.config.js

var webpack = require("webpack");
module.exports = function(env) {
    return {
        entry: {
            main: "./index.js",
            vendor: "moment"
        },
        output: {
            filename: "[chunkhash].[name].js`,
            path: "./dist"
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                names: ["vendor", "manifest"] // Specify the common bundle"s name.
            })
        ]
    }
};

通过上面的配置，我们可以看到三个bundle被生成，vendor,main以及manifestbundle。

云服务器私有云中文翻译 webrtc中文翻译源码中文说明之翻译代码

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

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

webpack2.x 代码分离文档翻译

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

Scott 2019-08-21 15:18 评论0 收藏0
代码分离-import() webpack2.x 中文文档翻译

摘要：代码分离使用中文文档地址点击这里动态导入目前，类函模块加载的语法建议整体交给。在中的是个分离点，用来把被请求的模块独立成一个单独的模块。被替代因为在中使用已经不合建议规范，因此将在版本中启用。代码分离-使用import() 中文文档地址点击这里动态导入目前，类函模import()块加载的语法建议——syntax proposal整体交给ECMAScript。ES2015(es6)...

jaysun 2019-08-20 15:18 评论0 收藏0
webpack2.x 中文文档翻译之依赖管理 Dependency Management

摘要：依赖管理该条已在中文网存在，点击这里表达式来调用当你的请求包含表达式，那个一个上下文环境将被创建。一个包含所有父文件夹和子及后代文件夹中以结尾的文件的上下文。一个函数，返回一个数组，包含上下文模块能够处理的所有的请求。依赖管理 Dependency Management 该条已在webpack2.x中文网存在，点击这里 es6 modules commonjs amd 表达式...

raledong 2019-08-20 14:42 评论0 收藏0
webpack2.x 中文文档翻译之公开路径(pbulic path)

摘要：公开路径该条已在中文网存在点击这里有一个非常有用的设置，允许你设置一个所有资源的基础路径在你的应用中。使用案例这里有有些实际应用中的案例，其中它使用的非常灵活。公开路径(pbulic path) 该条已在webpack2.x中文网存在,点击这里 webpack有一个非常有用的设置，允许你设置一个所有资源的基础路径在你的应用中。它叫做publicPath。使用案例(Use cases...

W4n9Hu1 2019-08-20 14:43 评论0 收藏0
webpack2.x 中文文档翻译之出口Output

摘要：出口影响编译的输出告诉怎样编译输出的文件允许多个入口一个出口的情况。该选项实现跨域加载模块可以的值是命名每个出口文件。不必明确绝对路径。使用设置项，设置具体位置。仅仅命名文件名字即可。出口Output 影响编译的输出告诉webpack怎样编译输出的文件允许多个入口一个出口的情况。用法 const config = { output: bundle.js }; module.e...

weizx 2019-08-20 14:42 评论0 收藏0