先来运行一下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. 【NOIP模拟】table(动态规划)

    题目背景 SOURCE:NOIP2016-RZZ-2 T2 题目描述 给定一个 n×m 的矩阵,行列均从 1 开始标号. 一个矩阵被认为是稳定的,当且仅当对于任意的 2≤i≤n,第 i 行的数的和不小 ...

  2. 【NOI模拟】谈笑风生(主席树)

    题目描述 设 T 为一棵有根树,我们做如下的定义: 设 a 和 b 为 T 中的两个不同节点.如果 a 是 b 的祖先,那么称 “ a 比 b 不知道高明到哪里去了 ” . 设 a 和 b 为 T 中 ...

  3. PL/SQL入门随笔

    PL/SQL(Procedure Language/SQL) PLSQL是Oracle对sql语言的过程化扩展:在SQL命令语言中增加了过程处理语句(如分支.循环等),使SQL语言具有过程处理能力.S ...

  4. arcgis for javascript 自定义infowindow

    arcgis 自己的infowindow 太难看了,放在系统中与系统中的风格格格不入,在参考了网上的一些资料后,整理编写了适合自己系统的infowindow,与大家分享. 1.自定义展示效果 2.In ...

  5. .Net 内存池

    最近在开发 Pinpoint .Net 客户端,和服务端通信都是通过 TCP 或者 UDP,需要处理大量的 Byte 数据,使用 .Net Framework 只能通过 new Byte[] 的方式申 ...

  6. Redis各种数据结构性能数据对比和性能优化实践

    很对不起大家,又是一篇乱序的文章,但是满满的干货,来源于实践,相信大家会有所收获.里面穿插一些感悟和生活故事,可以忽略不看.不过听大家普遍的反馈说这是其中最喜欢看的部分,好吧,就当学习之后轻松一下. ...

  7. 一.CPU,Mem过高怎么办 --这是个开始

    本身是名Java开发,在做了一段大数据的工作后,猛然间想对Java做个总结. 从未写过技术博客,一时不知如何开始,思虑后,暂且以自己喜爱的方式来开篇. 工作中遇到过CPU或内存过高的问题,解决步骤: ...

  8. global,$GLOBALS[' '] 全局, 浮动float跟margin的注意事项

    $a; global只能声明变量为全局,不能赋值,否则报错未定义:global $a; 相对于$GLOBALS['a'],写法是这样的,所有定义过的变量都存在这里: //浮动float跟margin的 ...

  9. 斜率优化dp

    转载自http://www.cnblogs.com/ka200812/archive/2012/08/03/2621345.html 我们知道,有些DP方程可以转化成DP[i]=f[j]+x[i]的形 ...

  10. Mybatis-Generator生成Mapper文件中<if test="criteria.valid">的问题解答

    写在前面 <Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦> 由于开源了项目的缘故,很多使用了My Blog项目的朋友遇到问题也都会联系我去 ...