11优化3-进一步控制JS大小

按需加载模块

前面讲述了如何把大的代码进行拆分，抽离出多个页面共享部分。但当web应用为单页且极为复杂时，不是每块代码用户都需要用到，我们可以将之抽离出去，当用户需要用到时才加载——这就是按需加载模块。

在webpack构建环境中，要按需加载代码需遵循ES标准的动态加载语法来编写代码，webpack会自动处理使用该语法编写的模块：

// import 作为一个方法使用，传入模块名即可，返回promise来获取模块暴露的对虾你给
// 注释webpackChunkName: 'lodash' 可以用于指定chunk名称在输出文件时有用
import(/* webpackChunkName: 'lodash' */'lodash').then(_ => {
  console.log(_.lash([1,2,3]))
})

注意一下，如果你使用了 Babel 的话，还需要 Syntax Dynamic Import 这个 Babel 插件来处理 import() 这种语法。

由于动态加载代码模块的语法依赖于 promise，对于低版本的浏览器，需要添加 promise 的 polyfill 后才能使用。

如上代码，webpack构建时会自动把lodash模块分离出来，并且在代码内部实现动态加载lodash功能。动态加载代码时依赖于网络，其模块内容会异步返回，所以import 方法是返回一个promise来获取动态加载的模块内容。

import后面的注释webpackChunkName: 'lodash'用于告知webpack艘要动态加载模块的名称。我们在webpack配置中添加output.chunkFilename配置：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].[hash:8].js',
  chunkFilename: '[name].[hash:8].js'
  // 指定分离出来的代码文件名称
}

这样就可以分离出来的文件名称用lodash标识了，如下图

Tree shaking

这个术语起源于 ES2015 模块打包工具 rollup，依赖于 ES2015 模块系统中的静态结构特性，可以移除 JavaScript 上下文中的未引用代码，删掉用不着的代码，能够有效减少 JS 代码文件的大小。拿官方文档的例子来说明一下。

// src/main.js
export function square(x) {
  return x * x
}
export function cube(x) {
  return x * x * x
}

// src/index.js
import {cube} from './math.js' // 这里只引用了cube方法

square方法未被引用，是可以删掉的。在webpack中，只有启动了JS代码压缩功能时，会做Tree Shaking优化。 4.x版本需指定mode为production。

若在项目中使用Babel，要把babel解析模块语法功能关掉，如下：

{
  "presets": [
    ["env", {"modules": false}]
  ]
}

sideEffects

可以做些了解