先来运行一下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. ssh连接异常：read from socket failed connection reset by peer

    我出现这个问题的原因是:之前将/etc的权限设为777, 这是一个错误的操作!!然后我把权限修改过来(chmod 400 /etc) 重启服务(/bin/systemctl restart ssh.s ...

  2. （转）CentOS6.5下Redis安装与配置

    场景:项目开发中需要用到redis,之前自己对于缓存这块一直不是很理解,所以一直有从头做起的想法. 本文详细介绍redis单机单实例安装与配置,服务及开机自启动.如有不对的地方,欢迎大家拍砖o(∩_∩ ...

  3. (转)Servlet初始化、运行、销毁全部过程

    Servlet初始化.运行.销毁全部过程 (2012-07-05 10:41:26) 标签: 杂谈 分类: java基础面试知识 Servlet的生命周期是由servlet的容器来控制的.分为3个阶段 ...

  4. 【ES6】变量的解构赋值

    1. 数组 var [a, b, c] = [1, 2, 3]; let [a, [b], d] = [1, [2, 3], 4]; 默认值生效的条件是,对象的属性值严格等于undefined. [x ...

  5. Yii框架用ajax提交表单时候报错Bad Request (#400): Unable to verify your data submission.

    提交表单报400错误,提示 "您提交的数据无法验证"原来是csrf验证的问题,因为表单是自己写的,在Yii框架中,为了防止csrf攻击,对post的表单数据封装了CSRF令牌验证. ...

  6. Pandas: 如何将一列中的文本拆分为多行？ | Python

    Pandas: 如何将一列中的文本拆分为多行? 在数据处理过程中,经常会遇到以下类型的数据: 在同一列中,本该分别填入多行中的数据,被填在一行里了,然而在分析的时候,需要拆分成为多行. 在上图中,列名 ...

  7. 如何查看appache的端口是否被占用

    win + R 快捷键输入 cmd 打开命令行. 输入 netstat -ano 查看端口使用情况 Ctrl + Shift + Esc 打开 windows 任务管理器,依次单击 [查看][ 选择列 ...

  8. File的getParentFile()和getParent()

    代码:      File file = new File("D:\\javaemp\\code\\java.txt");      String str1 = file.getP ...

  9. Android中的服务

    Android中的服务 四大组件都是运行在主线程 Android中的服务,是在后台运行 .可以理解成是在后台运行并且是没有界面的Activity. Foreground process 前台进程 ,用 ...

  10. n以内质数占的比例

    2 ->0.5 10 ->0.4 100-> 0.25 1000->0.168 10000->0.1229 100000->0.09592 1000000-> ...