webpack2.x 代码分离文档翻译

Scott 发布于2019-08-21 15:18 / 1912人阅读

摘要：代码分离代码分离是最受瞩目的功能。下面有两种代码分离的技术。使用实现代码分离是使用的方式实现静待资源异步调用。通过添加，我们可以在代码中打一个分离点，可以以此建立一个独立的包，包含这个点的所有代码。

代码分离(Code Splitting)

代码分离是webpack最受瞩目的功能。它允许你把你的代码分成不同的部分分开打包，然后实现在需要的时候再进行加载（按需加载提高速度）————例如用户导航到一个匹配的路由，或者一个用户事件。
因此能够减少打包的体积，控制家在流程次序，而且如果使用得当会极大影响加载速度。
下面有两种代码分离的技术。(webpack实现)

资源分离——缓存和并行下载(Resource splitting for caching and parallel loads) 厂商代码分立(Vendor code splitting)

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

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

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

css 分离(css splitting)

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

学习how to split css 使用ExtractTextWebpackPlugin.

按需分离(On demand code-splitting)

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

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

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

GPU云服务器云服务器翻译代码微信翻译表白代码翻译java的代码实现代码管理文档

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

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

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

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

elva 2019-08-20 14:43 评论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