如何分析Webpack代码分离

本篇文章给大家分享的是有关如何分析Webpack代码分离，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。提示：版本问题下面基于webpack 2.x版本。webpack 2.x相比webpack 1.x有重大改变。所以，如果你的项目中已使用了 webpack 1.x ，本教程的示例将不适用，请慎重。如果铁了心要升级 webpack ，请参考webpack 官方文档 – 从 v1 迁移到 v2阅读建议阅读前建议先阅读Webpack 概念。代码分离是 webpack 中最引人注目的特性之一。你可以把你的代码分离到不同的 bundle 中，然后你就可以去按需加载这些文件。总的来说，webpack分离可以分为两类：资源分离代码分离对第三方库(vendor) 和 CSS 进行代码分离，这些方式有助于实现缓存和并行加载。你可能也想将你的样式代码分离到单独的 bundle 中，以此使其独立于应用程序逻辑。这加强了样式的可缓存性，并且使得浏览器能够并行加载应用程序代码中的样式文件，避免 FOUC 问题 (无样式内容造成的闪烁)。安装ExtractTextWebpackPlugin如下webpack.config.js 中需要按下面进行配置：示例DEMO09：(DEMO/SOURCE)一个典型的应用程序，由于框架/功能性需求，会依赖于许多第三方库的代码。不同于应用程序代码，这些第三方库代码不会频繁修改。如果我们将这些库(library)中的代码，保留在与应用程序代码相独立的 bundle 中，我们就可以利用浏览器缓存机制，把这些文件长时间地缓存在用户机器上。为免费云主机域名了完成这个目标，不管应用程序代码如何变化，vendor 文件名中的hash部分必须保持不变。学习如何使用CommonsChunkPlugin分离 vendor/library代码。webpack.config.js在上面的配置中，在entry属性中，将 react 指定为一个独立的入口vendor；然后，在output属性中，将filename指定为 [name].[chunkhash:8].js，这表示输出文件的文件名样式。最后在plugins列表中引入CommonsChunkPlugin插件，用来指定 bundle 。执行 webpack 命令后，webpack 会生成 2 个 bundle 文件，形式如：示例DEMO10：(DEMO/SOURCE)虽然前面几类资源分离，需要用户预先在配置中指定分离模块，但也可以在应用程序代码中创建动态分离模块。这可以用于更细粒度的代码块，例如，根据我们的应用程序路由，或根据用户行为预测。这可以使用户按照实际需要加载非必要资源。前一节，我们了解了 webpack 可以将资源拆分为bundle。接下来，我们要学习如何异步加载。例如，这允许首先提供最低限度的引导 bundle，并在稍后再异步地加载其他功能。webpack 支持两种相似的技术实现此目的：使用import()(推荐，ECMAScript 提案) 和require.ensure()(遗留，webpack 特定)。本文只介绍官方推荐的import()方式。ES2015 loader 规范定义了import()作为一种在运行时(runtime)动态载入 ES2015 模块的方法。webpack 把import()作为一个分离点(split-point)，并把引入的模块作为一个单独的 chunk。import()将模块名字作为参数并返回一个Promoise对象，即import(name) -> Promise如果你想要在Babel中使用import，但是由于 import() 还是属于 Stage 3 的特性，所以你需要安装/添加syntax-dynamic-import插件来避免 parser 报错。在草案正式成为规范后，就不再需要这个插件了。例：我们来定义一个 Clock 组件，动态引入 moment 库。首先，安装 moment 库。JavaScript 代码：Clickheretochangingthetime.webpack.config.js以上就是如何分析Webpack代码分离，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注云编程开发博客行业资讯频道。

相关推荐: 测试VEEAM 10版本中的新增NAS功能

1. 什么是NAS在VEEAM 10版本中，支持了备份NAS的功能，在测试前免费云主机域名我们先来了解下什么是NAS。NAS被定义为一种特殊的专用数据存储服务器，包括存储器件（例如磁盘阵列、CD/DVD驱动器、磁带驱动器或可移动的存储介质）和内嵌系统软件，可提…