关于代码分割

省略废话。

1.ES6之前两个比较流行的模块机制CommonJS和AMD。CommonJS模块就是对象,加载模块时加载的是拷贝;而ES6加载的是对export的引用。

2.ES6模块不是对象,使用可出现在模块顶层任何位置的export显式指定输出的代码(变量、函数、class):

export:

  export var name=‘microsoft‘;

---another example 推荐在底部用{}输出需要的代码

  var  value_x=‘microsoft‘;

  export { value_x,value_y ,method_y};

 如果想给export的变量改名字,可以使用as:

  export { value_x,value_y  as  alias_name ,method_y};

  export function fn_name(){};

*export的变量是动态绑定其所在模块的。比如setTimeout后改变value_x的值,接收者得到的value_x也会定时改变。

import:

  import { value_x,mothed_y } from strUrl;

  value_x,mothed_y的名称必须与 strUr 中export的名称相同。如果想给import的变量改名字,可以使用as:

  import { value_x as value_z,mothed_y } from strUrl;

  *import具有提升效果。

  *import会执行所加载的模块。

  *import命令中接收的变量名要在{}中

整体加载:

  可以用*指定一个对象,所有import的东西都加载到这对象上:

  import * as mod from strUrl;

  var x=mod.value_x;

  也可以用module命令:

  module mod from strUrl;

  var x=mod.value_x;

export default:

  上面说了import命令中加载的变量名称要和export输出的名称一致,我们也可以在输出模块中用export default指定默认输出:

    export default function(){};  --比如一个匿名函数或对象

  然后自己在加载的时候给接收的函数/对象命名:

    import customName from strUrl;

    *import后不用加{}。因为export default在模块中只能使用一次,只输出一个变量/方法/class。

    *无论export default输出的是不是匿名,都视为匿名。

    *除了默认输出外还想加载其他变量:

    import customName,{value_x,method_x} from strUrl;

    *export * from strOtherMod 命令,先加载strOtherMod 再将其输出,*会忽略strOtherMod 的默认输出。

时间: 2024-08-02 00:31:21

关于代码分割的相关文章

webpack练手项目之easySlide(二):代码分割

Hello,大家好. 在上一篇 webpack练手项目之easySlide(一):初探webpack  中我们一起为大家介绍了webpack的基本用法,使用webpack对前端代码进行模块化打包. 但是乍一看webpack只是将所有资源打包到一个JS文件中而已,并没有做到真正的按需加载,这当然不是我们所想要的. 不急,今天的这一章我们就来一起继续探索webpack的另外一个功能:code split. 1.什么是code split  英文不好,暂且将其翻译为代码分割.也就是我们根据实际业务需求

webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实现的. 目前webpack针对此项功能提供 2 种函数: import(): 引入并且自动执行相关 js 代码 require.ensure(): 引入但需要手动执行相关 js 代码 本文将会进行逐一讲解. >>> 本节课源码 >>> 所有课程源码 1. 准备工作 此次代码

The way of Webpack learning (III.) -- codeSplitting & lazyLoding(代码分割和路由懒加载)

代码分割:对于一个大型的web项目来说,如果为了减少http请求,只打包出一个bundle.js文件,那么只要我们的需求修改了一点点,整个bundle.js都需要重新加载,得不偿失.所以我们不妨把代码分割成一块一块的,按需加载,而且还能利用浏览器缓存机制,如果文件没有修改,直接从缓存读取.也就是说,代码分割就是把代码切成很多块(chunk). 懒加载:按需加载,页面需要什么文件我才去加载什么文件.我现在只知道应用在路由懒加载中,就是根据路由,按需加载不同的文件. 在上一章节提到使用Commonc

React中的代码分割

代码分割想要解决的问题是:经打包工具??生成的bundle文件过大,特别是在我们引入第三方库的情况下. 在React中,我们有一下几种解决方案: 1. 动态加载 1 // math.js 2 export function add(a, b) { 3 return a + b 4 } 5 6 // 未使用动态加载 7 import { add } from './math.js' 8 console.log(add(10, 20)) 9 10 // 使用动态加载 11 import("./mat

webpack 代码分割一点事

webpack 俨然已经成为前端最主流的构建工具,其功能多种多样,我们今天就来分析下关于代码分割这部分的一点事,并在最后讲述如何实现在webpack编译出的代码里手动添加一个异步chunk. 什么是chunkId与moduleId? 每个chunkId对应的是一个js文件,每个moduleId对应的是一个个js文件的内容的模块(一个js文件里面可以require多个资源,每个资源分配一个moduleId),所以它两的关系就是一个chunkId可能由很多个moduleId组成. 在webpack

webpack代码分割;

var webpack=require('webpack') var path=require('path') module.exports={ entry:{ 'pageA':'./src/pageA', 'pageB':'./src/pageB', 'vendor':['lodash'] }, output:{ path:path.resolve(__dirname, './dist'), filename:'[name].bundle.js', chunkFilename: "[name]

编码最小单位:代码块。

代码块:完成一定功能的一系列的代码 ,或者是几行代码 或者是 连续调用几个函数. 将代码分割成代码块,或者通过分割成单独的函数 又或者 仅是录入几行空白部分实现. 在完成一定功能的代码块中最好不要加入其他功能的代码 且  要注意代码块的顺序性   尤其是在代码块间存在着数据共享. 上文源于实际开发中.且代码排查花费了12人时. 伪代码举例: ①.存在TimerManager类,其属性有List<ActionTimer> list.方法有removeTimer(id:String).run():

VS的代码分析工具

代码度量(Code Metrics)是用来测量专业标准的软件特性. 在某些方面,它提供了量化的有用反馈给开发者. 查看代码度量值很简单:在项目或解决方案上按右键,选择"Calculate Code Metrics". 以下是一些类似的结果: 结果窗口中有五个不同的度量特性:圈复杂度(Cyclomatic Complexity), 继承深度(Depth of Inheritance), 类耦合度(Class Coupling), 代码行数(Lines of Code), 和一个总的可维护

JAVA 一个或多个空格分割字符串

知识补充 String的split方法支持正则表达式: 正则表达式\s表示匹配任何空白字符,+表示匹配一次或多次. 有了以上补充知识,下面的内容就很好理解了. 一.待分割字符串 待分割字符串为如下: String str = "a b c d e f g" 其中,字符串中的的空白分别为:单个空格,多个空格,tab制表符. 二.使用一个或多个空格分割字符串 正确代码如下: String [] arr = str.split("\\s+"); for(String ss