先来运行一下webpack命令，

看到app.js才4k。

安装一下react

npm install react --sava-dev

在app/index.js文件内引入react

运行webpack

看到我们的app.js文件竟然达到了100k。

因为app.js中包含了react的大量代码，造成了体积增大。

如果一个用户的网速只有1k/s，而且app.js中有加载css的过程例如还没有把css文件分离出去的情况，用户要等好几分钟才会看到整个页面。

这是无法忍耐的。怎么解决呢？

在webpack.config.js中添加如下配置。

执行webpack命令。

app.js已经缩小到2k,react也分离到vendor.js中。

在浏览器中运行一下看看

这里要注意了，先请求的是vendor.js，后请求的是app.js。

webpack教程(六)——分离组件代码的更多相关文章

  1. Webpack 2 视频教程 017 - Webpack 2 中分离打包项目代码与组件代码

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  2. .NET开发邮件发送功能的全面教程(含邮件组件源码)

    今天,给大家分享的是如何在.NET平台中开发“邮件发送”功能.在网上搜的到的各种资料一般都介绍的比较简单,那今天我想比较细的整理介绍下: 1)         邮件基础理论知识 2)         ...

  3. KnockoutJS 3.X API 第六章 组件(5) 高级应用组件加载器

    无论何时使用组件绑定或自定义元素注入组件,Knockout都将使用一个或多个组件装载器获取该组件的模板和视图模型. 组件加载器的任务是异步提供任何给定组件名称的模板/视图模型对. 本节目录 默认组件加 ...

  4. 无废话ExtJs 入门教程六[按钮：Button]

    无废话ExtJs 入门教程六[按钮:Button] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个按钮“提交”与重置.如下所示代码区的第68行位置, butt ...

  5. Webpack教程二

    Webpack教程一 开发技巧 启用source-map 现在的代码是合并以后的代码,不利于排错和定位,只需要在config中添加 ... devtool: 'eval-source-map', .. ...

  6. [js高手之路]深入浅出webpack教程系列8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader)用法

    我们接着上文,那么在上篇文章的最后,写到了css-loader的用法,如果你用心发现,就能看到我在style.css样式文件中写了一个这样的样式: div { transition: all ease ...

  7. webpack4 系列教程(六): 处理SCSS

    这节课讲解webpack4中处理scss.只需要在处理css的配置上增加编译scss的 LOADER 即可.了解更多处理css的内容 >>> >>> 本节课源码 & ...

  8. 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  9. PySide——Python图形化界面入门教程(六)

    PySide——Python图形化界面入门教程(六) ——QListView和QStandardItemModel 翻译自:http://pythoncentral.io/pyside-pyqt-tu ...

随机推荐

  1. 对JavaScript闭包的理解

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 在开始了解闭包前我们必须要先理解JavaScript的变量作用域. 一.变量的作用域无非就是两 ...

  2. (转)SqlServer基础之(触发器)（清晰易懂）

    阅读目录 一:触发器的优点 二:触发器的作用 三:触发器的分类 四:触发器的工作原理 五:创建触发器 六:管理触发器 概念:   触发器(trigger)是SQL server 提供给程序员和数据分析 ...

  3. Objective-C 使用核心动画CAAnimation实现动画

    先来看看效果吧 整个核心动画就不多做介绍了,随便一搜就能有很多很详细的解释,主要使用以下四种 CABasicAnimation //经典动画 CAKeyframeAnimation //关键帧动画 C ...

  4. Excel 一键上传到数据库

    <a class="edit"  id="batchImport">   批量导入  </a> js代码弹窗: $("#bat ...

  5. 灵玖软件Nlpir Parser语义智能内容过滤

    Internet是全球信息共享的基础设施,是一种开放和面向 所有用户的技术.它一方面要保证信息方便.快捷的共享;另一方面要防止垃圾信息的传播.网络内容分析是一种管理信 息传播的重要手段.它是网络信息安 ...

  6. Password

    Description Rivest是密码学专家.近日他正在研究一种数列E = {E[1],E[2],--,E[n]}, 且E[1] = E[2] = p(p为一个质数),E[i] = E[i-2]* ...

  7. Codeforces 556 A Case of the Zeros and Ones

    A. Case of the Zeros and Ones time limit per test 1 second memory limit per test 256 megabytes input ...

  8. 剑指offer--二叉树的后序遍历

    思路:对于一个二叉树的后序遍历序列来说,最后一个数一定是根节点,然后前面的数中,从最开始到第一个大于根节点的数都是左子树中的数,而后面到倒数第二个数应该都是大于根节点的,是右子树,如果后面的数中有小于 ...

  9. nopcommerce的WidgetZones

    来自:http://www.kingreatwill.com Hi, Having just started developing nopCommerce (and having forked out ...

  10. python 脚本在linux环境下运行

    有两种方式:1.直接使用python xxxx.py执行.其中python可以写成python的绝对路径.使用which python进行查询.2.在文件的头部(第一行)写上#!/usr/bin/py ...