zoukankan      html  css  js  c++  java
  • webpack 多入口打包分析

    [文章最后都是老夫精挑细选的干货哦~]

    1 为什么需要多入口打包?(或者说什么时候需要多入口打包?)

    先从但入口打包说起,单入口也就是常见的单页面应用,就是任何用户想访问我这个网站 必须且通过这一个唯一的入口

    比如我们开发了一个 外卖网站,http://www.waimai.com => 10.79.64.4:8080/index.html, 主页
    有很多吃的种类,比如

    东北菜 10.79.64.4:8080/dongbei/
    湖南菜 10.79.64.4:8080/fulan/
    广东菜 10.79.64.4:8080/guangdong/

    比如你就爱吃东北菜,那么你访问网站的方式有两种

    第一种直接访问 主页,然后在点击链接跳转到东北菜页面
    第二种你记住了东北菜页的网站 直接访问,

    此时这两种方式其实对于单页应用是没差的,服务器都是先加载主页,(也就是主页面下载到你的电脑)然后在去用ajax方式去获取东北菜(如果你 是用了异步组件的话),

    此处说一下单页面打包后生成的文件正常是三个js文件( 这是在你没有使用异步组件加载的情况,也就是没有使用require.ensure)

    main.js //此时三个菜系页面是一起到打包到这里的
    vendor.js
    commontrunk.js

    (此时主页index.html script 加载的是main.js,vendor,commontrunk这三个文件)

    如果你使用了异步组件,打包出来的是,比如你将三个菜系页面用异步加载
    main.js
    vendor.js
    commontrunk.js
    dongbeicai.js //东北菜
    hunancai.js//湖南菜
    guangdongcai.js//广东菜

    (此时主页index.html script 加载的是main.js,vendor,commontrunk这三个文件)

    以上是正常的单页网站的情况,东北菜湖南菜广东菜,是我们网站的三个子系统
    那么如果我们的子系统过于复杂呢?
    比如我们网站 分为 地球菜 和 火星菜
    地球菜,有 美国菜 中国 菜,
    中国菜才是东北菜 湖南菜。。

    当然我想你仍然是可以把这些写成一个单页,所有子系统都用异步组件加载,这样的危害就是当每个子系统都足够复杂适合,还混合在一起写 就会更复杂和混乱

    那么多页应用来了 我们的网站编程了

    地球菜 10.79.64.4:8080/diqiu/index.html
    火星菜 10.79.64.4:8080/huoxing/index.html

    看出区别来了吗 区别就是 我们每个子系统都有了自己的入口,可以直接作为根节点存在,而不是要一直依赖于上层父页面,

    好下面说一下 前端如何实现

    1 修改webpack config 的 entry,改成多个,
    2 修改webpack config 的 插件HtmlWebpackPlugin,有几个入口就要生成几个index.html页面

    3 打包原则可以参考

    4自己的疑惑

    1看到别人的项目 页面所有的通过路由去访问的组件 都用的异步组件,是否有必要?是否需要区分一下 组件大小?因为多个异步组件意味着多次请求
    2对于一些公共组件 如 loading ,toast 等很多页面都可能引用的到的组件最后被打包了哪里?是否会重复打包进每个组件的js bundle?还是打包进app.js bundle业务主组件,还是抽取到了公共common.js bundle
    

    这两个疑问需要再调研一下

    公共代码抽取之manifest.js 相关

    参考 http://www.cnblogs.com/myqianlan/p/5626505.html
    参考 http://www.jb51.net/article/110281.htm
    参考 http://www.cnblogs.com/xiaojingyuan/p/6840629.html

    多入口打包实践

    参考 http://www.cnblogs.com/lvdabao/p/5944420.html

    多入口打包用到的【node】glob模块用法

    参考 http://blog.csdn.net/tangxiaolang101/article/details/53931145

    总体分析

    参考 http://www.cnblogs.com/libin-1/p/6938581.html
    参考 https://zhuanlan.zhihu.com/p/25954788

  • 相关阅读:
    Oracle常用命令
    Infobright 数据仓库
    ORACLE RMAN备份及还原
    将数据库转换为归档日志模式
    Oracle SCN详解
    Android中Intent与Bundle 在传值时有什么不同
    如何让自定义Dialog上下居中
    activity中onResume()的用处
    TabHost 两种使用方法 直接让一个Activity 继承TabActivity 和 利用findViwById()方法取得TagHost组件
    豌豆荚进程与adb端口冲突
  • 原文地址:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/7501345.html
Copyright © 2011-2022 走看看