Webpack2 core concept

发表于

Code Splitting

Code Splitting 即代码分割，可以把一个大 bundle 分割成多个小 bundle，按需加载，从而达到性能优化

在 Webpack 中主要有两种 Code Splitting

  • 将第三方的类库，框架，几乎不会修改的工具方法等单独打成包，这样浏览器可以缓存
  • 按需加载打包，比如路由切换加载或点击事件加载

Code Splitting Doc

Tree Shaking

Tree Shaking 可以理解为排除没有用到的代码

使用 import 导入了某个模块，但是该模块并没有被使用，则打包时，webpack 会自动把该模块排除在外

Tree Shaking 的概念来自于 Rollup，它基于 ES6 的 import/export，它也是 Webpack2 的核心之一

1
2
3
4
5
6
7
8
9
10
11
12
// math.js
export function square(x) {
    return x * x;
}

export function cube(x) {
    return x * x * x;
}

// index.js
import { cube } from './math';
console.log(cube(5));

index.js 中，square 没有被导入，webpack 在打包时会将其排除
即便如下导入 square，但 square 并没有被使用，webpack 也会将其排除

1
2
3
// index.js
import { cube, square } from './math';
console.log(cube(5));

这就是 Tree Shaking 的核心概念
Tree Shaking Doc

Tree Shaking 实战总结：

  1. Tree Shaking 功能建立在 ES6 的模块机制上，可以在打包时删除没有被使用的模块代码
  2. 通过 ES6 直接 export/export default 的模块才能够在引入后被 webpack Tree Shaking

  3. 不能使用 babel 转换 ES6 module，即需要指定

    1
    2
    3
    4
    5
    6
    // .babelrc
    {
      "presets": [
        ["env", { modules: false }]
      ]
    }

  4. 即使以 npm i package 引入 ES6 导出的模块，如果该模块文件夹下有 .babelrc 文件，则必须删除，或指定 modules: false，因为 babel 的 lookup behavior

一些注意事项

  • webpack -p 利用了 uglify2 压缩代码，但是 uglify2 暂不支持 ES6

CommonsChunkPlugin

第三方包提取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// home.js
import _ from 'lodash'
import { add } from './math'

console.log(add(4, 5))
console.log('home page...')

// about.js
import _ from 'lodash'
import { add } from './math'

console.log(add(1, 5))
console.log('about page...')

// webpack.config.js
entry: {
  vendor: ['lodash'],
  home: './src/home.js',
  about: './src/about.js'
},
output: {
  path: resolve(__dirname, 'dist'),
  filename: '[name].js'
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    // 顺序很重要
    name: ['common', 'vendor']
  })
]

// home.html
<script src="dist/vendor.js"></script>
<script src="dist/common.js"></script>
<script src="dist/home.js"></script>

以上配置运行 webpack 会在 dist 目录生成三个文件：

  • home.js（home.js 自己的代码）
  • about.js（about.js 自己的代码）
  • common.js（add 方法的代码）
  • vendor.js（webpack启动代码 + lodash 代码）

注意，CommonsChunkPlugin name 参数的顺序非常重要

Under The Hood：

  • webpack 会生成 common.js，包含 webpack 启动代码 + lodash 代码 + add 方法代码
  • webpack 生成 home.js 和 about.js，包含
  • webpack 又生成了 vendor.js，因为在入口指定了 vendor: [‘lodash’]，所以 vendor.js 和 common.js
    的共同拥有：webpack 启动代码和 lodash 代码

然后
此时，webpack 把 webpack 启动代码和 lodash 代码从 common.js 抽取到了 vendor.js，所以 common.js 只剩了 add 方法代码