Webpack 记录

Webpack 配置项记录，以后新建工程很快

entry

entry 是描述一个 bundle 的入口文件是什么。在具体在业务中使用的方式有如下三种：

  • 直接在 package.json 中描述 entry 内容；
  • 动态创建 entry 内容，使用 glob 等工具使用若干通配符，运行时获得 entry 的条目，这种方式比较适合入口文件不集中且较多的场景；
  • 根据 entry 内容挂钩一些 html 模板 loader，例如 html-webpack-plugin，ejs-html-loader 等，这种方式主要用以解决 html 随模板生成，但同时根据 entry 的一些内容自动替换模板中一些关键字。
    output

output 的作用在于告知 webpack 该如何把构建编译后的文件放入到磁盘。
在具体业务中使用的方式有如下种：

  • output.filename: 修改构建后文件的命名，业务中会存在 4 种情况。

    • 直接设置一个 bundle 的 name，例如 index.bundle.js 这类场景发生在只有一个 entry 的情况；
    • [name]，使用 Chunk 的名称
    • [hash]，使用 Compilation 的 hash 值，在这种方式下生成的资源文件会都有相同的 hash 值
    • [chunkhash]，使用 Chunk 的 hash 值，在这种方式下会根据每个 Chunk 的来生成 hash 值，使用这种方式的情况发生在想要 cache，cache 会衍生出很多的内容这个在之后再做展开。

  • output.path: 修建构建后文件输出到磁盘的目录，业务中会存在 1 种情况。

  • 传入一个相对于当前 cwd 的路径，这种自定义情况非常普遍

  • output.publicPath: 申明构建后的资源文件的引入地址，业务中会存在 1 种情况

    • 设置为 https://xxxx.xx.com/assets/ 这种方式，这种方式的出现在于 webpack 默认在引用资源时都是从根目录开始，然后现实中 assets 资源 和 html 会随不同的发布平台发布。

  • output.chunkFilename：声明非 entry chunks 的资源文件的命名，一般它发生的场景在 code split 即按需加载的业务场景，例如 require.ensure，在这种场景下，会对 require.ensure 的模块进行独立的打包，文件命名也会有四种情况。

    • [id]，id 值 从 0 开始
    • [name]，该 chunk 的 name，require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
    • [hash]，使用 Compilation 的 hash 值，在这种方式下生成的资源文件会都有相同的 hash 值
    • [chunkhash]，使用 Chunk 的 hash 值，在这种方式下会根据每个 Chunk 的来生成 hash 值，使用这种方式的情况发生在想要 cache，cache 会衍生出很多的内容这个在之后再做展开。

  • output.library：一旦设置后该 bundle 将被处理为 library。

  • output.libraryTarget：export 的 library 的规范，有支持 var, this, commonjs,commonjs2,amd,umd。
    resolve

  • resolve.alias：为模块设置别名。这种方案通常使用在两种情况下：

    • 一种是单纯为模块设置别名，一来方便自己不再需要根据目录书写 ../ 等这种路径操作，另外也可以提升 webpack 在 resolve 模块时的速度；
    • 另外一种则和优化上扯上一些关系，比如 resolve.alias.a = isTest ? ‘moduleTestA’ : ‘moduleA’，如上这种方式使用最大的好处在于能根据当前所属代码所需情况构建产物中只会有 moduleTestA 或者 moduleA。以上这种方式可以在所有资源文件应用。当然也可以使用 babel-plugin-module-resolver 和 less-plugin-rewrite-import 予以解决。

  • resolve.root：添加个人目录到 webpack 查找模块的路径里，这种需求比如发生在当前某个项目所依赖某个文件并不在该项目中。

  • resolve.modulesDirectories：模块解析方式，在项目中我看到一般会有两种使用的场景，
    _ 一种主要针对开发者，需要新增一种模块的解析方式。比如设置为 [“node_modules”, “bower_components”] 那么在项目中 foo/bar 的文件下依赖一个模块 a, 那么 webpack 会通过如下的顺序去寻找依赖
    foo/bar/node_modules/a
    foo/bar/bower_components/a
    foo/node_modules/a
    foo/bower_components/a
    node_modules/a
    bower_components/a
    _ 另外一种则是想要申明模块 resolve 的优先级，比如在一个项目中有依赖 A，B，依赖的 A,B 同时依赖了 C，如果在构建过程中，你想明确表示我只想要某个 C 的话，则就可以通过这种方式。

  • resolve.extensions：设置解析模块的拓展名。默认为 [“”, “.webpack.js”, “.web.js”, “.js”]。比如新增一种文件扩展名，[“”, “.webpack.js”, “.web.js”, “.web.ts”, “.web.tsx”, “.js”]

  • resolve.packageMains：设置 main 的入口文件。这种方式目前会在 webpack@2 中使用 resolve.mainFields 来解决 tree-shaking，目前支持的有 redux 等。
    resolveLoader

  • resolveLoader.modulesDirectories：同 resolve.modulesDirectories 只不过针对 loader，这边需要注意的是在 resolve.modulesDirectories 中关于优先级的，在工具被二次封装时会用到比较多。

  • resolveLoader.moduleTemplates： [“-webpack-loader”, “-web-loader”, “-loader”, ““]webpack@1 中内置的模板，但是在 webpack@2 是并不会补齐。
    resolve.root, resolve.fallback, resolve.modulesDirectories 这三个属性在 webpack@2 中被合并到了 resolve.modules
    module

  • module.loaders：对应模块的加载器。在 webpack@2 中使用 module.rules 予以取代。以下会罗列目前常用文件类型的模块加载处理方式。

    • babel-loader 处理 .js 和 .jsx 文件，由于历史原因 atool-build 在处理 .jsx 文件时会处理 node_modules 下内容。
      • 目前 atool-build 已经内置的 preset 有 babel-preset-es2015-ie，babel-preset-react，babel-preset-stage-0，plugins 有 babel-plugin-add-module-exports 和 babel-plugin-transform-decorators-legacy。
      • 目前业务中自行使用的有: plugins: babel-plugin-import 构建资源大小提供优化，babel-plugin-transform-runtime 实现按需加载 pollyfill 需要与 babel-runtime 结合使用，babel-plugin-module-resolver 实现诸如 webpack 中 resolve.alias 功能，babel-plugin-dva-hmr 和 babel-plugin-dev-expression 实现 dva hot module replacement 功能，babel-plugin-react-intl 实现 react 多语言方案， babel-plugin-es6-promise 覆盖原有 promise; preset: babel-preset-env 实现根据浏览器支持情况自动打包 pollyfill 等功能，babel-preset-es2016 等。在实际过程中，都可能需要对 preset 传入参数的需求。一般设置如下
        • presets: [[require.resolve(‘xxx-preset’), { options: hi }]]
      • cacheDirectory：缓存支持，一般默认就开启
      • babelrc：一般需要禁用掉，防止用户端的 babel 配置影响内置配置
    • tsx-loader: 处理 ts 文件，内置参数 target: ‘es6’, jsx: ‘preserve’,moduleResolution: ‘node’, declaration: false, sourceMap: true，需要注意的是在使用 ts 项目时必须要人为引入一个 ts config.json 的文件，如果没有内容，内部设置为一个空对象即可。
    • style-loader: 通过 js 方式 inject style 节点来注入样式，一般用于开发环境
    • css-loader: 处理 css 文件，一般现有项目中都会使用 ExtractTextPlugin 把样式文件抽取出来，但是在本地开发环境下一般不会 extract 出来，因为一旦 extract 出来会导致 hmr 对样式失效。所以一般在开环环境下会 style-loader!css-loader!postcss-loader 而在 production 下采用 ExtractTextPlugin，另外在每个 loader 都有对应的参数，postcss 还有专门的插件集。除此之外，常用的 css-loader 参数有 modules autoprefix indentName 等
    • postcss-loader: 目前在 postcss 中内置的 plugin 有 rucksack-css - 可废弃 和 autoprefixer 用以实现 autoprefix。一般针对适配的不同的浏览器，需要对 autoprefixer 配置 browsers 参数。一般在无线业务中为了适配高清方案也会引入 postcss-plugin-pxtorem, 同时也需要设置一些参数。
    • less-loader: 处理 less 文件，一般情况下需要配置 modifyVars 参数，用以覆盖 less 变量值
    • sass-loader: 处理 sass 文件，也有使用 fast-sass-loader 和 @ali/sass-loader
    • file-loader: 处理 html 文件，当前 atool-build 内置的方式，在实际业务中，很多并不希望 html 是拍平的结构，所以他们会自定义 fileloader 的参数，比如 file?name=[path][name].[ext]&context=./src/pages，但是也有不少业务中对 html 处理引入了新的 loader, 有 ejs-html-loader，html-minify-loader，还有直接使用插件 HtmlWebpackPlugin 来处理的情况，经过研究，根本上其实是想要解决 html 的自动化生成，以及内部资源文件的引用可以自动化生成。
    • url-loader: 处理 woff woff2 ttf eot svg png jpg jpeg gif 文件，目前业务中会有变更的点有，需要设置 limit 的大小，以及 svg 的处理可能需要存在多个 loader 处理，因为在使用 antd-mobile 业务中需要新增一个 svg-sprite-loader 来把 svg 文件当成一个 component
    • svg-sprite-loader, 已在 url-loader 中予以说明
    • HtmlWebpackPlugin, 已在 file-loader 中予以说明
    • ejs-html-loader, 已在 file-loader 中予以说明
    • html-minify-loader, 已在 file-loader 中予以说明
    • handlebars-loader, 处理 .handlebars 文件，并未内置，业务中自行引入
    • aptl-loader, 处理 .atpl 文件
    • raw-loader, 处理 tpl 文件，也有使用 html-loader 来处理的
    • scss-loader, 处理 scss 文件
    • vue-loader, 处理 vue 文件
    • json-loader, 处理 json 文件

注：一个正常 loader 的配置可能需要配置 test,exclude,include,loader,loaders 属性

  • module.preLoaders：istanbul-instrumenter，此方式在 webpack@2 中被弃用，可以直接在对应的应用规则的文件中启用 enforce: ‘pre’
  • module.postLoaders：es3ify-loader，提升 ie 兼容性，此方式在 webpack@2 中被弃用，可以直接在对应的应用规则的文件中启用 enforce: ‘post’
  • module.noParse: 指明 webpack 不去解析某些内容，该方式有助于提升 webpack 的构建性能，配置内容可以是
    externals

目前业务中使用都为声明外部依赖，这种方式有益于加速 webpack 构建，但是需要开发者额外引入被 external 库的 cdn 地址，常见的有 React 和 ReactDom。
devtool

文档
node

目前内置如下内容为 empty
[
‘child_process’,
‘cluster’,
‘dgram’,
‘dns’,
‘fs’,
‘module’,
‘net’,
‘readline’,
‘repl’,
‘tls’,
];
plugin - webpack 内置

大部分插件都有需要参数传入

  • webpack.optimize.CommonsChunkPlugin，在业务中通常有两种使用方式，一种是直接从所有的代码中抽取 common 的逻辑，此处可以配置 common 抽取最小单元，还有一种 common 的使用方式是 vendor 即用户配置具体的 entry 条目，并把该条目抽取为 vendor。
  • webpack.optimize.OccurenceOrderPlugin：优化插件，优化 module id
  • webpack.optimize.UglifyJsPlugin：代码丑化
  • webpack.optimize.DedupePlugin：打包时删除重复模块代码
  • webpack.DefinePlugin：给代码注入全局标识符
  • webpack.BannerPlugin：给代码添加 banner 信息
  • webpack.ProvidePlugin：调用模块的别名
  • webpack.NoErrorsPlugin：报错但不退出 webpack 进程
  • webpack.ProgressPlugin：显示构建进度
  • DllPlugin：主要业务中应用于提升本地调试速度，配置需要有单独的 Dll 配置文件
  • DllReferencePlugin：主要业务中应用于提升本地调试速度，需要配合 DllPlugin 使用
    plugin - webpack 扩展

大部分插件都有需要参数传入

  • webpack-visualizer-plugin：查看构建 bundle 的构成

  • html-webpack-plugin：生成 html 文件

  • copy-webpack-plugin：拷贝文件或者文件夹

  • clean-webpack-plugin：清理文件或者文件夹

  • i18n-webpack-plugin：国际化支持

  • webpack-shell-plugin：给 shell 提供运行时机

  • case-sensitive-paths-webpack-plugin： 路径大小写敏感问题

  • friendly-errors-webpack-plugin：友好报错信息

  • extract-text-webpack-plugin：将文本内容生成抽取成独立文件

  • happypack：加速构建，需要对配置做比较大改动

  • parallel-webpack： 提供资源文件的并发构建

  • map-json-webpack-plugin：使用 hash 时，生成资源映射文件
    需要沉淀的方案

  • html 自动化生成，自动更新引用资源

  • 更加优质的 common 生成逻辑

  • 目前有持久化缓存需求，需要给出一个更加完善的方案，即更加合理化的 hash 方案

  • https://github.com/goldhand/sw-precache-webpack-plugin 通过 sw 来完成资源文件离线化

  • 单一文件多种 loader 处理，单一文件多种 loader 如何进行区间调整

展开全文 >>

Webpack 配置项

Webpack 记录，各种反复压缩操作，以后不要再来一遍了。

注意把项目结构留一留。

配置分析：
模块打包器，构建依赖关系图，打包成一个或多个 bundle。

  • entry：入口。单入口或多入口、第三方库入口。
  • output：输出目录及命名。
  • loader：模块解析,在 module 中配置 rules。处理非 js 文件，将所有类型的文件转换为 webpack 能够处理的有效模块。
  • mode：development/production。
  • plugins：打包、优化、压缩等等等等。
    webpack 内置模块：
  • webpack.optimize.OccurenceOrderPlugin：优化插件，优化 module id
  • webpack.optimize.DedupePlugin：有些 JS 库有自己的依赖树，并且这些库可能有交叉依赖，DedupePlugin 可以找到他们删除重复依赖
  • webpack.optimize.UglifyJsPlugin：代码丑化
  • webpack.DefinePlugin：给代码注入全局标识符
  • webpack.BannerPlugin：给代码添加 banner 信息
  • webpack.ProvidePlugin：调用模块的别名
  • webpack.NoErrorsPlugin：报错但不退出 webpack 进程
  • webpack.ProgressPlugin：显示构建进度
    其他常见模块：
  • ：查看构建 bundle 的构成
  • html-webpack-plugin：生成 html 文件
  • copy-webpack-plugin：拷贝文件或者文件夹
  • clean-webpack-plugin：清理文件或者文件夹(rimraf 模块)
  • webpack-shell-plugin：给 shell 提供运行时机
  • case-sensitive-paths-webpack-plugin： 路径大小写敏感问题
  • friendly-errors-webpack-plugin：友好报错信息
  • extract-text-webpack-plugin：将文本内容生成抽取成独立文件
    使用 webpack 的站点中有三种代码类型：
  • 自己编写的源码
  • 依赖的第三方 libary 或 vender 代码
  • webpack 的 runtime 和 manifest：runtime 根据 manifest 中的映射数据来查询和解析模块
    runtime 包含：浏览器运行时，webpack 用来连接模块化的应用程序的所有代码。在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。
    manifest：当编译器(compiler)开始执行、解析和映射应用程序时，它会保留所有模块的详细要点。

构建流程：

  1. 解析 webpack 配置参数，合并 shell 传入和 webpack.config.js 文件里配置的参数，生成最后的配置结果
  2. 注册所有配置的插件，让插件监听 webpac 构建生命周期的事件节点，以便做出对应的反应
  3. 从配置的 entry 入口文件开始解析文件构建 AST 语法树，找出每个文件所依赖的文件，递归下去
  4. 在解析文件 递归的过程中根据文件类型和 loader 配置找出合适的 laoder 用来对文件进行转换
  5. 递归完后得到每个文件的最终结果，根据 entry 配置生成代码块 chunk
  6. 输出所有 chunk 到文件系统

缓存要点:
1、合理划分模块。在 entry 入口中，制定 vender、libs 等。

  • 代码分割，一般引入第三方库更新频率低，利于缓存

2、提取频繁共用的公共模块。利用 commonsChunkPlugin 将公共的模块抽离出来，生成一个或多个依赖文件。通过 minchucks 指定最少依赖次数(为 infinity 表示不包含任何模块)。(在多页面/多入口很有优势，单入口无法抽离文件中的公共模块)

  • 频繁模块的抽离，压缩代码体积
    3、抽离清单。一般 manifest 打包在 vender 文件中,在 commonsChunkPlugin 中的 names 中增加 manifest（放在 libs 之前，可用其他名字代替）可以抽离出 manifest。为了减少请求，也可以使用 inline-manifest-webpack-plugin 配合 html-webpack-plugin 内联至 html 中
  • 如果 webpack 打包生成的 hash 变了之后，manifest 会改变，则 vender 也会变化，而 vender 通常比较大。因此需要分离 manifest。
    左图使用修改 booking.vue 前，右图修改 booking.vue 后

使用 inline-manifest-webpack-plugin 写入 html 后

4、稳定的 chunk id（webpack 内部对文件的引用）。默认的 chunk id 是 webpack 根据依赖的收集顺序递增的正整数。
当修改 app 或者增删文件时，chunk id 会变化导致许多模块（文件的 chunckhash 没有变化而 id 变了）的缓存不能使用，manifest（webpack 的 runtime 中包含 chunk id 及其对应的 chunckhash 对象）也改变了，我们需要 chunk id 最好稳定。
1）OccurrenceOrderPlugin：让 webpack 以依赖模块出现的次数决定 id 的值，次数越多 id 越小。缺点：但依赖变动大，chunk id 会大幅变动。
2）NamedModulesPlugin：将 chunk id 替换为相对路径。缺点：文件增大+filename 导致安全问题
3）HashedModuleIdsPlugin：NamedModulesPlugin 进阶，将路径进行 MD5 摘要。
左图使用 HashedModuleIdsPlugin 前，右图使用 HashedModuleIdsPlugin 后，booking.vue page

5、稳定的 hash 值。

  • 【hash】：在 webpack 构建中会产生一个 compilation 对象，hash 是对该对象内的所有内容计算而来。当使用了 extract 时，由于其抽取的异步流程，有时即使没有改动，也会存在 hash 异动情况。
  • 【chunkhash】：每一个 chunkhash 都根据自身的内容计算而来。

1）webpack-md5-hash：使 chunkhash 与该 chunk 内的代码相关联，让 chunck 与其依赖的 chunk id 无关（子改变与父无关）。缺点：当修改 app 时，app 的 chunk id 改变，因此 vender 中对应的 app 模块的 ID 改变，所以 vender 的 hash 理应改变（这时子与父有关）。但是由于 vender 实际包含模块没变，webpack-md5-hash 根据 chunk 内实际包含的模块生成的 chunckhash，因此 vender 的 hash 不会变，导致引入的 vender 是旧的。
2）webpack-chunk-hash

6、其他资源缓存

  • Image/Fonts 的【hash】由 webpack/file-loader 计算。
  • 提取 CSS(写在 js 中的 style 里的样式无法被抽离，仍打包在 js 中)的【contenthash】由 webpack/extract-text-webpack-plugin 计算。

其他问题：

  1. 无法抽离单入口多路由页面的公共模块组件，可以自己指定写死。
  2. 在不同的电脑下 chunkhash change
  3. module 的版本问题

展开全文 >>

同步加载与异步加载

很长很长，属于看完就忘类型。有需要再看。

一、同步加载与异步加载的形式

  1. 同步加载我们平时最常使用的就是这种同步加载形式：
1
<script src="http://yourdomain.com/script.js"></script>

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。

js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改
dom、重定向等行为，所以默认同步执行才是安全的。

以前的一般建议是把 script 放在页面末尾 body 之前，这样尽可能减少这种阻塞行为，而先让页面展示出来。

简单说：加载的网络 timeline 是瀑布模型，而异步加载的 timeline 是并发模型。

  1. 常见异步加载（Script DOM Element）
1
2
3
4
5
6
7
8
(function () {
  var s = document.createElement("script");
  s.type = "text/javascript";
  s.async = true;
  s.src = "http://yourdomain.com/script.js";
  var x = document.getElementsByTagName("script")[0];
  x.parentNode.insertBefore(s, x);
})();

异步加载又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理。 这种方法是在页面中 script 标签内，用 js 创建一个 script 元素并插入到 document 中。

这样就做到了非阻塞的下载 js 代码。

async 属性是 HTML5 中新增的异步支持，见后文解释，加上好（不加也不影响）。
此方法被称为 Script DOM Element 法，不要求 js 同源。

将 js 代码包裹在匿名函数中并立即执行的方式是为了保护变量名泄露到外部可见，这是很常见的方式，尤其是在 js 库中被普遍使用。

例如 Google Analytics 和 Google+ Badge 都使用了这种异步加载代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function () {
  var ga = document.createElement("script");
  ga.type = "text/javascript";
  ga.async = true;
  ga.src =
    "https:" == document.location.protocol ? "https://ssl" : "http://www";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(ga, s);
})();
(function () {
  var po = document.createElement("script");
  po.type = "text/javascript";
  po.async = true;
  po.src = "https://apis.google.com/js/plusone.js";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(po, s);
})();

但是，这种加载方式在加载执行完之前会阻止 onload 事件的触发，而现在很多页面的代码都在 onload 时还要执行额外的渲染工作等，所以还是会阻塞部分页面的初始化处理。

  1. onload 时的异步加载
1
2
3
4
5
6
7
8
9
10
11
12
(function () {
  function async_load() {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.async = true;
    s.src = "http://yourdomain.com/script.js";
    var x = document.getElementsByTagName("script")[0];
    x.parentNode.insertBefore(s, x);
  }
  if (window.attachEvent) window.attachEvent("onload", async_load);
  else window.addEventListener("load", async_load, false);
})();

这和前面的方式差不多，但关键是它不是立即开始异步加载 js ，而是在 onload 时才开始异步加载。这样就解决了阻塞 onload 事件触发的问题。

补充：DOMContentLoaded 与 OnLoad 事件

DOMContentLoaded : 页面(document)已经解析完成，页面中的 dom 元素已经可用。但是页面中引用的图片、subframe 可能还没有加载完。
OnLoad：页面的所有资源都加载完毕（包括图片）。浏览器的载入进度在这时才停止。
这两个时间点将页面加载的 timeline 分成了三个阶段。

  1. 异步加载的其它方法
    由于 Javascript 的动态特性，还有很多异步加载方法：
  • XHR Eval
  • XHR Injection
  • Script in Iframe
  • Script Defer
  • document.write Script Tag
  • 还有一种方法是用 setTimeout 延迟 0 秒 与 其它方法组合。
    XHR Eval ：通过 ajax 获取 js 的内容，然后 eval 执行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var xhrObj = getXHRObject();
xhrObj.onreadystatechange =
 function() {
 if ( xhrObj.readyState != 4 ) return;
eval(xhrObj.responseText);
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');
Script in Iframe：创建并插入一个 iframe 元素，让其异步执行 js 。
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('<body onload="insertJS()">');
doc.close();

GMail Mobile：页内 js 的内容被注释，所以不会执行，然后在需要的时候，获取 script 元素中 text 内容，去掉注释后 eval 执行。

1
2
3
4
5
<script type="text/javascript">
  /*
   var ...
   */
</script>

详见参考资料中 2010 年的 Velocity 大会 Steve Souders 和淘宝的那两个讲义。

二、async 和 defer 属性

  1. defer 属性
1
<script src="file.js" defer></script>

defer 属性声明这个脚本中将不会有 document.write 或 dom 修改。
浏览器将会并行下载 file.js 和其它有 defer 属性的
script，而不会阻塞页面后续处理。 defer 属性在 IE 4.0 中就实现了，超过 13
年了！Firefox 从 3.5 开始支持 defer 属性 。 注：所有的 defer
脚本保证是按顺序依次执行的。

  1. async 属性
1
<script src="file.js" async></script>

async 属性是 HTML5 新增的。作用和 defer
类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在 onload
事件之前完成。 Firefox 3.6、Opera 10.5、IE 9 和 最新的 Chrome 和 Safari 都支持
async 属性。可以同时使用 async 和 defer，这样 IE 4 之后的所有 IE
都支持异步加载。

  1. 详细解释 script 标签在 HTML 4.01 与 HTML5 的区别：

    • type
      属性在 HTML 4 中是必须的，在 HTML5 中是可选的。
    • async 属性是 HTML5 中新增的。
    • 个别属性（xml:space）在 HTML5 中不支持。

    说明：
    （1） 没有 async 属性，script 将立即获取（下载）并执行，然后才继续后面的处理，这期间阻塞了浏览器的后续处理。

    （2） 如果有 async 属性，那么 script 将被异步下载并执行，同时浏览器继续后续的处理。

    （3） HTML4 中就有了 defer 属性，它提示浏览器这个 script 不会产生任何文档元素（没有 document.write），因此浏览器会继续后续处理和渲染。

    （4） 如果没有 async 属性但是有 defer 属性，那么 script 将在页面 parse 之后执行。

    （5）如果同时设置了二者，那么 defer 属性主要是为了让不支持 async
    属性的老浏览器按照原来的 defer 方式处理，而不是同步方式。 另参见官方说明：script async

    个人补充： 既然 HTML5 中已经支持异步加载，为什么还要使用前面推荐的那种麻烦（动态创建 script 元素）的方式？ 答：为了兼容尚不支持 async 老浏览器。如果将来所有浏览器都支持了，那么直接在 script 中加上 async
    属性是最简单的方式。

三、延迟加载（lazy loading）

前面解决了异步加载（asyncloading）问题，再谈谈什么是延迟加载。

延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的 js，而是在需要的时候或稍后再通过 js 的控制来异步加载。
也就是将 js 切分成许多模块，页面初始化时只加载需要立即执行的 js ，然后其它 js 的加载延迟到第一次需要用到的时候再加载。

特别是页面有大量不同的模块组成，很多可能暂时不用或根本就没用到。
就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片。

四、script 的两阶段加载 与 延迟执行（lazy execution）

JS 的加载其实是由两阶段组成：下载内容（download bytes）和执行（parse andexecute）。

浏览器在下载完 js 的内容后就会立即对其解析和执行，不管是同步加载还是异步加载。

前面说的异步加载，解决的只是下载阶段的问题，但代码在下载后会立即执行。

而浏览器在解析执行 JS 阶段是阻塞任何操作的，这时的浏览器处于无响应状态。

我们都知道通过网络下载 script 需要明显的时间，但容易忽略了第二阶段，解析和执行也是需要时间的。

script 的解析和执行所花的时间比我们想象的要多，尤其是 script 很多很大的时候。有些是需要立刻执行，而有些则不需要（比如只是在展示某个界面或执行某个操作时才需要）。

这些 script 可以延迟执行，先异步下载缓存起来，但不立即执行，而是在第一次需要的时候执行一次。

利用特殊的技巧可以做到 下载 与 执行的分离 (再次感谢 javascript 的动态特性)。

比如将 JS 的内容作为 Image 或 object 对象加载缓存起来，所以就不会立即执行了，然后在第一次需要的时候再执行。

此部分的更多解释 请查看末尾参考资料中 ControlJS 的相关链接。

小技巧：

  1. 模拟较长的下载时间： 写个后端脚本，让其 sleep 一定时间。如在 jsp 中
    Thread.sleep(5000); ，这样 5 秒后才能收到内容。
  2. 模拟较长的 js
    代码执行时间（因为这步一般比较快不容易观察到）： var t_start = Number(new
    Date()); while ( t_start + 5000 > Number(new Date()) ) {} 这个代码将使 js 执行 5
    秒才能完成！

五、script 标签使用的历史

  1. script 放在 HEAD 中
1
2
3
<head>
  <script src="“…”"></script>
</head>
  • 阻止了后续的下载； - 在 IE 6-7 中 script 是顺序下载的，而不是现在的
    “并行下载、顺序执行” 的方式； - 在下载和解析执行阶段阻止渲染（rendering）；
  1. script 放在页面底部（2007）
1
2
3
<body>
  <script src="“…”"></script>
</body>
  • 不阻止其它下载； _ 在 IE 6-7 中 script 是顺序下载的； _
    在下载和解析执行阶段阻止渲染（rendering）；
  1. 异步加载 script（2009）
1
2
3
var se = document.createElement("script");
se.src = "http://anydomain.com/A.js";
document.getElementsByTagName("head")[0].appendChild(se);

这就是本文主要说的方式。

  • 不阻止其它下载；
  • 在所有浏览器中，script 都是并行下载；
  • 只在解析执行阶段阻止渲染（rendering）；
  1. 异步下载 + 按需执行 (2010)
1
2
3
var se = new Image();
se.onload = registerScript();
se.src = "http://anydomain.com/A.js";

把下载 js 与解析执行 js 分离出来

  • 不阻止其它下载；
  • 在所有浏览器中，script 都是并行下载；
  • 不阻止渲染（rendering）直到真正需要时；

六、异步加载的问题

在异步加载的时候，无法使用 document.write 输出文档内容。

在同步模式下，document.write 是在当前 script 所在的位置输
出文档的。
而在异步模式下，浏览器继续处理后续页面内容，根本无法确定 document.write 应该输出到什么位置，所以异步模式下 document.write 不可行。

而到了页面已经 onload 之后，再执行 document.write 将导致当前页面的内容被清空，因为它会自动触发 document.open 方法。 实际上 document.write 的名声并不好，最好少用。

替代方法：

  1. 虽然异步加载不能用 document.write，但还是可以 onload 之后执行操作 dom（创建 dom 或修改 dom）的，这样可以实现一些自己的动态输出。比如要在页面异步创建一个浮动元素，这和它在页面中的位置就没关系了，只要创建出该 dom 元素添加到 document 中即可。

  2. 如果需要在固定位置异步生成元素的内容，那么可以在该固定位置设置一个 dom 元素作为目标，这样就知道位置了，异步加载之后就可以对这个元素进行修改。

七、JS 模块化管理

异步加载，需要将所有 js 内容按模块化的方式来切分组织，其中就存在依赖关系，而异步加载不保证执行顺序。

另外，namespace 如何管理 等相关问题。这部分已超出本文内容，可参考：RequireJS 、CommonJS 以及 王保平(淘宝)的 SeaJS 及其博客 。

七、JS 最佳实践

  1. 最小化 js 文件，利用压缩工具将其最小化，同时开启 http gzip 压缩。工具：
  2. 尽量不要放在 head 中，尽量放在页面底部，最好是 body 之前的位置
  3. 避免使用 document.write 方法
  4. 异步加载 js ，使用非阻塞方式，就是此文内容。
  5. 尽量不直接在页面元素上使用 Inline Javascript，如 onClick 。有利于统一维护和缓存处理。

展开全文 >>

关于模块化的一些知识点

关于模块化的一些知识点，以前收录的一些文档

AMD 规范文档 https://github.com/amdjs/amdjs-api/wiki/AMD
amdjs 的 require 接口文档 https://github.com/amdjs/amdjs-api/wiki/require
amdjs 的接口文档 https://github.com/amdjs/amdjs-api/wiki
RequireJS 官网接口文档 http://www.requirejs.org/docs/api.html

模块系统 https://github.com/seajs/seajs/issues/240
前端模块化开发的价值 https://github.com/seajs/seajs/issues/547
前端模块化开发那点历史 https://github.com/seajs/seajs/issues/588
CMD 模块定义规范 https://github.com/seajs/seajs/issues/242
SeaJS API 快速参考 https://github.com/seajs/seajs/issues/266
从 CommonJS 到 Sea.js https://github.com/seajs/seajs/issues/269

RequireJS 和 AMD 规范 http://javascript.ruanyifeng.com/tool/requirejs.html
CommonJS 规范 http://javascript.ruanyifeng.com/nodejs/commonjs.html
Javascript 模块化编程 http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
Javascript 模块化编程 http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html

知乎 AMD 和 CMD 的区别有哪些？ http://www.zhihu.com/question/20351507

JavaScript 模块化开发 - CommonJS 规范 http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-commonjs
JavaScript 模块化开发 - AMD 规范 http://www.feeldesignstudio.com/2013/09/javascript-module-pattern-amd

模块化设计 http://baike.baidu.com/view/189730.htm
模块化 http://baike.baidu.com/view/182267.htm

展开全文 >>

学学python

要用 ptyhon 打包一下文件，学了点简单用法。

做个记录～

LEGB 法则：
L: local，局部作用域，即函数中定义的变量；
E: enclosing，嵌套的父级函数的局部作用域，即包含此函数的上级函数的局部作用域，但不是全局的；
G: globa，全局变量，就是模块级别定义的变量；
B: built-in，系统固定模块里面的变量，比如 int, bytearray 等;
本地作用域（local）> 当前作用域被嵌入的本地作用域（Enclosing locals）> 全局/模块作用域（Global） > 内置作用域（Built-in）

作用域的产生
在 Python 中，只有模块（module），类（class）以及函数（def、lambda）才会引入新的作用域，其它的代码块（如 if、try、for 等）是不会引入新的作用域的。

变量的修改
一个不在局部作用域里的变量默认是只读的，如果试图为其绑定一个新的值，python 认为是在当前的局部作用域里创建一个新的变量，也就是说在当前局部作用域中，如果直接使用外部作用域的变量，那么这个变量是只读的，不能修改。

global 关键字
当内部作用域想修改外部作用域的变量时，就要用到 global 和 nonlocal 关键字了，当修改的变量是在全局作用域（global 作用域）上的，就要使用 global 先声明一下。

nonlocal 关键字（nonlocal 是 python3 新增的关键字）
global 关键字声明的变量必须在全局作用域上，不能嵌套作用域上，当要修改嵌套作用域（enclosing 作用域，外层非全局作用域）中的变量怎么办呢，这时就需要 nonlocal 关键字了

一个定义于某模块中的函数的全局作用域是该模块的命名空间，而不是该函数的别名被定义或调用的位置

展开全文 >>