Webpack 4教程 - 第四部分,使用SplitChunksPlugin分离代码

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。
原文出处:https://wanago.io/2018/06/04/code-splitting-with-splitchunksplugin-in-webpack-4/

Webpack 4 给我们带来了一些变化。其中包括更快地打包,引入了SplitChunksPlugin,并淘汰掉之前的CommomsChunksPlugin。在本文,你将学习如何拆分输出代码以提高应用的性能。

代码分离的思想

先说重要的:在Webpack中,到底什么是代码分离?代码分离允许你把代码拆分到多个文件中。如果使用得当,你的应用性能会提高很多。因为浏览器能缓存你的代码。

每当你做出一次修改,包含修改的文件需要被所有访问你网站的人重新下载。但你并不会经常修改应用的依赖库(译者注:你常修改的是你的业务逻辑)。如果你能把那些依赖库拆分到完全分离的文件中,即使业务逻辑发生了更改,访问者也不需要再次下载依赖库,直接使用之前的缓存就可以了。

使用Webpack时,你会得到一个或多个生成的输出文件,这些文件包含了我们源码的最终输出。而它们由代码块(chunks)组成。

入口(Entry)

入口定义了我们代码中应用是从哪里开始执行的,这也是Webpack开始打包的地方。你可以定义一个入口(常见于单页应用),或者多个入口(常见于多页应用)。

定义一个入口,就会得到一个chunk。如果你只使用字符串定义一个入口,那么这个chunk名为main。如果你使用对象定义了多个入口,那么它们会以entry对象的属性来命名。下面的例子会得到相同的chunk:

// 例1
entry: './src/index.js'
// 例2
entry: {
  main: './src/index.js'
}

输出(Output)

在配置文件中,输出配置是一个对象,它指明了Webpack应该在哪儿和如何对我们的打包结果和资源进行输出。虽然可能有多个入口,但是只能有一个输出配置对象。而chunk名称的用处,就在于根据入口对应不同的输出。你可以为我们的打包输出定义一个固定的文件名,但若想代码分离,就不应该这么做。你可以使用[name]为我们的输出文件创建文件名的模板:

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

一件值得注意的重要东西是[chunkhash]:它是一个基于文件内容的属于特定chunk的哈希值。它仅会随着文件内容的改变而改变。因此,浏览器就可以利用这一点来缓存它。如果打包输出的文件名变了,浏览器就知道自己需要重新下载它。一个chunkhash可能长这样:0c553ebfd158e16da428。

我们的主chunk会被打包进一个叫main.[chunkhash].bundle.js的文件。

SplitChunksPlugin

由于有了SplitChunksPlugin,你可以把应用中的特定部分移至不同文件。如果一个模块在不止一个chunk中被使用,那么利用代码分离,该模块就可以在它们之间很好地被共享。这是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的一个默认行为,但这只涉及异步的chunk,即意味着只作用于我们异步引入的那些文件。我们会在介绍懒加载的时候讨论这个话题。为了使这个默认行为能支持所有类型的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。再者,是所有其他共享模块的默认缓存组。这里有一个小点:有一些冗余。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 // 修改了这里
    }
  }
};

结果是,它新创建了属于默认缓存组的名为a~b.[chunkhash].bundle.js的文件。因为我们的users.js文件所占空间远远小于30Kb,在没有修改minSize属性的情况下,它不会被打包到单独的分离文件。在真实环境下,这是一件好事,因为这样不会带来实质的性能提升,反而会强制浏览器为分离出的文件(它现在是很小的)再发一次额外的请求。

我们可以进一步,为仅在utilities目录下的做特殊处理:

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。(译者注:这需要在打包之前,把users.js文件移至./src/utilities目录下,并修改a.js和b.js中的相关引用路径)。虽然我们现在可以让minSize:0成为全局设置(即放在splitChunks对象中作为其属性),但即使这样,默认的缓存组也不会被创建。因为,所有可能被引入的文件都应该在我们刚创建的utilities组下。这个组具的优先级是0,高于默认缓存组的优先级。你可能已经注意到了,默认缓存组的优先级被设置为了-20。

还有其他的配置供你使用,可查看SplitChunksPlugin文档

总结

即使你只有一个入口(常发生于大多数单页应用中),把你的依赖放入一个独立的文件依然是个好主意。这其实很容易做到,因为使用SplitChunksPlugin是Webpack 4的默认行为,可能你设置一下chunks: 'all'就足够了。如果你想让我讨论此相关话题,欢迎留言。很快我们将会学习如何使用懒加载,让你的应用性能更上一层楼。敬请期待!

 

posted @ 2019-02-22 08:44 葡萄城技术团队 阅读(...) 评论(...) 编辑 收藏