码迷,mamicode.com
首页 > Web开发 > 详细

webpack教程(六)——分离组件代码

时间:2017-09-03 14:54:26      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:http   pre   ges   images   class   div   解决   webpack   bpa   

先来运行一下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教程(六)——分离组件代码

标签:http   pre   ges   images   class   div   解决   webpack   bpa   

原文地址:http://www.cnblogs.com/herozhou/p/7049398.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!