博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
webpack基础——代码分离
阅读量:6224 次
发布时间:2019-06-21

本文共 1623 字,大约阅读时间需要 5 分钟。

代码分离是什么

代码分离是一种技术,使得主文件被拆分为多个文件,同时保证分离后的代码对原有的功能没有影响。webpack也具备代码分离的能力。由于webpack的打包过程是自动化的,因此自然的通过webpack做代码分离后的文件之间的关系要么是自动关联的要么能很清晰看到分离文件之间的联系。

webpack中代码分离的方案分为三类:

  1. 多入口

    webpack从一个入口出发对应一个输出的bundle.js,那么多个入口就将会有多个输出的bundle.js,虽然这些bundle.js之间不存在自动的关联关系,但是,在HTML文件中分别引入他们就能实现了引用关联。甚至可以使用HtmlWebpackPlugin插件,自动化生成引用由webpack打包生成的JavaScript文件的HTML文件。

  2. CommonsChunkPlugin
    该插件可以用来分离引用的第三方库,将第三方库独立成为一个JavaScript文件,之后的操作如同多入口产生的多个bundle.js一样,或者在HTML文件中引用,或者由HtmlWebpackPlugin插件来生成这个包含引用的HTML文件。
    webpack基础——代码分离
    上图的代码截图于https://github.com/webpack/webpack/releases 的v3.10.0版本中的/examples/multiple-entry-points/webpack.config.js。结合了多入口和CommonsChunkPlugin的使用,可以作为示例参考。
  3. 动态导入
    上面两种方案有很大的局限性,首先要求代码可以分为多个入口否则多入口的方案没有意义,其次,使用CommonsChunkPlugin可以提取第三方库,但是却没有说明业务代码怎么做代码分离,因此,第三种方案动态导入要来解决业务代码中的代码分离问题。
    webpack支持多种动态导入写法:
    • require.ensure()
      webpack基础——代码分离
      webpack基础——代码分离
    • import()
      webpack基础——代码分离
    • ES6(async、await)
      webpack基础——代码分离
      一旦使用了动态导入语法,webpack在打包的时候就会自动分离bundle.js,进而生成与bundle.js有自动关联关系的其他小的JavaScript文件。

      动态导入和懒加载

      使用代码分离技术运行小demo之后,会发现代码确实是分离了,但是加载网页的时候所有资源是一口气按顺序全都下载。代码分离技术本身并没有起到任何的优化作用,反而由于更多的http请求,又恰好在不支持HTTP2.0的HTTP服务器上运行时,可能还会降低加载的性能。

      设想一下,如果分离的文件能在真正需要的时候才加载,这样就能提高加载渲染性能。因此,懒加载(按需加载)的思想就是在用户进行交互的时候,加载其所需的资源。懒加载的思想结合代码分离的方案,这就启发了应该在用户交互的代码中加入动态导入的写法。

      按需加载到底是优化还是基础

      根据上一节最后给出的启发方案:在用户交互的代码里加入动态导入的写法,使得用户交互时才引入所需的模块。看到这里,内心很难平静。按需加载从效果上看,提高了加载性能,这自然算是优化。然而从实现的角度上看,除非有合适的定制化的插件或者自身水平极高能够改写webpack对模块的操纵行为,否则必然需要修改业务代码。从代码成分的角度看,这种写法是代码***。总的说来,如果把按需加载看成是项目实现的基础,那在实现功能的时候就要顺带实现。否则,优化之路必然很漫长,但即使再漫长,抓住本质思想就并不复杂。

      方案

    • 采用框架,使得ui组件可以按需加载
      react:
      vue:
    • 动态路由
      选型路由组件的时候,优先查看是否有根据路由对资源懒加载的能力
    • 统一资源暴露
      书写一个或者多个模块来统一管理资源,主要功能是使用动态导入的写法导出其他的模块的内容,平时在业务代码中用统一资源暴露的模块去获取真正有用的对象。伪代码如下:
      webpack基础——代码分离
      webpack基础——代码分离

转载于:https://blog.51cto.com/dkjc007/2055781

你可能感兴趣的文章
关于表单的组件 radio select checkbox
查看>>
对chrome开发者工具的有效利用
查看>>
2011年国外最受欢迎的15个社交网站
查看>>
spring中使用logback日志组件替换log4j
查看>>
Wex5开发基础之微信支付
查看>>
JS之prototype基础篇
查看>>
如此熟悉 的梦境
查看>>
Dubbo注册到发布执行流程(原理)
查看>>
win7下centos 7安装
查看>>
暗巷网盘快捷下载器 V1.3绿色中文版
查看>>
如何还原Navicat for SQL Server的备份数据
查看>>
《人人都是产品经理》读记
查看>>
Java与C++语言在作用域上的差异浅析
查看>>
解决windows使用rsync同步到Linux权限问题
查看>>
__FILE__,__LINE__,__DATE__,__TIME__
查看>>
《途客圈创业记》读书笔记
查看>>
grep 匹配 以什么开头的内容
查看>>
使用蒙版制作动画
查看>>
windows安装lxml
查看>>
数据库中间件 MyCAT 源码分析 —— SQL ON MongoDB
查看>>