webpck代码拆分与缓存

分离打包插件

• SplitChunksPlugin

使用webpack4.xx提供的SplitChunksPlugin，废弃了webpack3.xx中的CommonsChunkPlugin，CommonsChunkPlugin导致的主要问题是产出的chunk在引入时会产生重复的代码，无法优化异步chunk，高优的chunk产出需要的minchunks配置比较复杂，而SplitChunksPlugin能够解决掉CommonsChunkPlugin中所出现的问题。SplitChunksPlugin在production模式下是默认开启的，但是它默认只作用于异步chunk，如果要作用于入口chunk的话，需要配置optimization.splitChunks.chunks: "all"，同时webpack自动split chunks是有几个限制条件的：

1. 新产出的vendor-chunk是要被共享的，或者模块来自npm包；
2. 新产出的vendor-chunk的大小得大于30kb；
3. 并行请求vendor-chunk的数量不能超出5个；
4. 对于entry-chunk而言，并行加载的vendor-chunk不能超出3个。

这些限制可以在SplitChunks的默认配置项中可以一一对应的看到。

splitChunks: {
	chunks: "async",
	minSize: 30000,
	minChunks: 1,
	maxAsyncRequests: 5,
	maxInitialRequests: 3,
	name: true,
	cacheGroups: {
		default: {
			minChunks: 2,
			priority: -20
			reuseExistingChunk: true,
		},
		vendors: {
			test: /[\\/]node_modules[\\/]/,
			priority: -10
		}
	}
}

　　

其实不难理解这些限制，因为SplitChunksPlugin产生的结果就是原来chunk被拆分了，引入的文件数量会变多，因此需要在文件数量上进行限制。

• runtimeChunkPlugin

在使用CommonsChunkPlugin的时候，我们通常会把webpack runtime的基础函数提取出来，单独作为一个chunk，毕竟code splitting想把不变的代码单独抽离出来，方便浏览器缓存，提升加载速度。webpack4废弃了CommonsChunkPlugin，采用了runtimeChunkPlugin可以将每个entry chunk中的runtime部分的函数分离出来，只需要一个简单的配置：optimization.runtimeChunk: true。

文件缓存

我们每次在更新代码重新部署时，会出现一个问题，就是没有看到我们最新更改的内容，常规的操作是清除浏览器缓存，重新刷新下浏览器，这时我们看到了最新的更新内容。之所以存在这种问题是因为我们没有给文件添加hash值，这里说明一下hash与chunkhash的不同，hash会每次都会更新，而chunkhash是根据你的文件内容是否有变化去更新，优点是不需要每次从服务端拉取资源，可以有效利用浏览器缓存，提高页面加载速度。具体实现代码如下：

   configureWebpack: config => {
       
        config.output.chunkFilename = 'js/[name].[chunkhash].js',//给每个js文件添加chunkhash后会自动更新已经改动的文件，而没有改动的文件则继续使用缓存。
        config.output.filename = '[name].[chunkhash].js'

    },