Webpack 4 教程 - 4. 使用SplitChunksPlugin插件进行代码分割

3

Webpack 4给我们带来了一些改变。包括更快的打包速度,引入了SplitChunksPlugin插件来取代(之前版本里的)CommonsChunksPlugin插件。在这篇文章中,你将学习如何分割你的输出代码,从而提升我们应用的性能。

代码分割的理念

首先搞明白: webpack里的代码分割是个什么鬼? 它允许你将一个文件分割成多个文件。如果使用的好,它能大幅提升你的应用的性能。其原因是基于浏览器会缓存你的代码这一事实。每当你对某一文件做点改变,访问你站点的人们就要重新下载它。然而依赖却很少变动。如果你将(这些依赖)分离成单独的文件,访问者就无需多次重复下载它们了。

使用webpack生成一个或多个包含你源代码最终版本的“打包好的文件”(bundles),(概念上我们当作)它们由(一个一个的)chunks组成。

入口(Entry)

入口定义了我们的应用代码开始执行的那个文件,webpack从这个文件开始打包。你能定义一个入口点(常见于单页应用 - Single-Page Application), 或者多个入口点(常见于多页应用 - Multiple-Page Application)。

定义一个入口点就生成一个chunk。如果你只是用字符串的方式定义了一个入口点,其就被命名为main。如果你用对象的方式定义多个入口点,其就被命名为入口对象中的键值。下面两个例子是等价的:

entry: './src/index.js'
entry: {
  main: './src/index.js'
}

输出(Output)

输出对象配置webpack如何输出我们的打包(bundles)和资源(assets),以及将它们放到哪里。因为可能多于一个入口点,而只(能)指定一个输出配置。事实上我们就用chunks来给其一一命名。你能给打包输出的文件定义一个确定的名字,但既然我们想要分割我们的代码,就不能这么干。你得使用[name]来创建输出文件名的模板:

output: {
  filename: '[name].[chunkhash].bundle.js',
  path: path.resolve(__dirname, 'dist')
}

这里要注意的重要事情是 [chunkhash]: 它基于你文件的内容给每个chunk生成了一个特有的hash。它只有在你的文件内容本身变化的时候才变化。事实上,(如果内容没有变化)浏览器会缓存它。如果文件名改变了(译注:这里是指hash变化了,而hash是文件名的一部分,即意味着文件的内容变化了),浏览器就知道要重新下载了。chunkhash看起来长得就象这样子: 0c553ebfd158e16da428

如此这般,我们的main chunk就会被打包成名为 main.[chunkhash].bundle.js的文件。

SplitChunksPlugin插件

正是有了SplitChunksPlugin插件,你能在你的应用中移出一部分到单独的文件中。如果一个模块被多个chunks使用,(分割出它之后)就能很容易的在这些chunks之间共享。这正是webpack的默认行为。

// utilities/users.js

export default [
  { firstName: "Adam", age: 28 },
  { firstName: "Jane", age: 24 },
  { firstName: "Ben",  age: 31 },
  { firstName: "Lucy", age: 40 }
]
// a.js

import _ from 'lodash';
import users from './users';

const adam = _.find(users, { firstName: 'Adam' });
// b.js

import _ from 'lodash';
import users from './users';

const lucy = _.find(users, { firstName: 'Lucy' });
// webpack.config.js

module.exports = {
  entry: {
    a: "./src/a.js",
    b: "./src/b.js"
  },
  output: {
    filename: "[name].[chunkhash].bundle.js",
    path: __dirname + "/dist"
  }
};

运行之后,你会看到webpack创建了二个文件: a.[chunkhash].bundle.js和b.[chunkhash].bundle.js,每一个文件都包含了lodash库的一份拷贝: 这不太好! 我之前说过webpack的默认行为会给共享库创建分离的文件,但这涉及到异步chunks,即我们异步导入文件。我们在讨论懒加载的时候再来更多的覆盖这一主题。为了针对所有类型的chunks,我们需要稍微改改我们的webpack配置:

// webpack.config.js

module.exports = {
  entry: {
    a: "./src/a.js",
    b: "./src/b.js"
  },
  output: {
    filename: "[name].[chunkhash].bundle.js",
    path: __dirname + "/dist"
  },
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  },
};

现在我们看到创建了一个附加的名叫vendors~a~b.[chunkhash].bundle.js的文件,其包含了Lodash库。事实上这全靠了配置中本身默认固有一个cacheGroups的配置项:

splitChunks: {
    chunks: "all",
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  }

首先,vendors这一项指明了包括来自node_modules目录中的文件。其次default这一项表示默认的缓存组,包括其它共享模块。这里有一个小小的问题:发生了重复。a.[chunkhash].bundle.js和b.[chunkhash].bundle.js都包含了users.js的内容。这是因为,SplitChunksPlugin插件默认只分割超过30kb的文件。我们能很容易的更改这点:

// webpack.config.js

module.exports = {
  entry: {
    a: "./src/a.js",
    b: "./src/b.js"
  },
  output: {
    filename: "[name].[chunkhash].bundle.js",
    path: __dirname + "/dist"
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      minSize: 0
    }
  }
};

默认的cache group配置使得会生成一个名为a~b.[chunkhash].bundle.js的文件。因为我们的users.js文件大大小于30kb,如果没有修改minSize属性的话,它就不会分割成一个单独的文件。在真实情形下,这是合理的,因为(如分割)并不能带来性能确实的提升,反而使得浏览器多了一次对utilities.js的请求,而这个utilities.js又是如此之小(不划算)。

我们能更进一小步,只针对utilities目录中的文件:

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    a: "./src/a.js",
    b: "./src/b.js"
  },
  output: {
    filename: "[name].[chunkhash].bundle.js",
    path: __dirname + "/dist"
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      cacheGroups: {
        utilities: {
          test: /[\\/]src[\\/]utilities[\\/]/,
          minSize: 0
        }
      }
    }
  }
};

现在我们打包出4个文件:a.[chunkhash].bundle.js, b.[chunkhash].bundle.js, vendors~a~b.[chunkhash].bundle.js 和 utilities~a~b.[chunkhash].bundle.js。即使我们现在设置一个全局的minSize: 0(在splitChunks对象中),默认的cache group也不会创建。这是因为被我们创建的utilities group覆盖了。utilities group默认的优先级值是0, 高于default cache group的。你可能已经注意到,默认cache group的优先级设置成了-20。

还有其它一些默认参数的设置,你能查阅SplitChunksPlugin的文档

小结

即使你只有一个入口点(见于大多数的单页应用),分离依赖到单独的文件中也是一个好主意。使用SplitChunksPlugin来达到这一目标实际上很简单,因为这是Webpack 4的默认行为,很有可能你只需设置chunks: “all”就足够了。如果你想要我说说其它有关的东西,告诉我吧。很快我们将学习如何应用懒加载来更好的提升性能, 敬请期待!

你可能感兴趣的

cssnote · 2018年12月01日

讲得很好,简单易懂

回复

载入中...