The way of Webpack learning (VI.)

使用commonChunkPlugin的都是基于webpack3.10.0，在webpack4中直接配置optimization就可以了。

一：什么是长缓存？

浏览器在用户访问页面的时候，为了加快加载速度，对用户请求的静态资源都会进行存储，但是每次代码更新或者升级的时候，我们都需要浏览器去加载新的代码。最方便的方法就是引入新的文件名称，只下载新的代码块，不加载旧的代码块，这就是长缓存。

二：场景实现

1、业务代码+第三方库代码

解决方法：

提取vendor，hash -> chunkhash
每次打包的时候在输出的界面上输出hash值，代表打包的哈希，而不是每个代码块的哈希，因此把哈希变成代码块的哈希

提取 webpack runtime

// foo.js import react from 'react' console.lg('hello world')

//webpack.config.js const path = require('path') const webpack = require('webpack') module.exports = { entry: { main: './src/foo', // 如果要把vendor和业务代码区分开 // 独立的给vendor建一个entry就可以了 vendor: ['react'] },

1output: {
2    path: path.resolve(__dirname, 'dist'),
3    filename: '[name].[chunkHash].js'
4},
5plugins: [
6    new webpack.optimize.CommonsChunkPlugin({
7        name: 'vendor',
8        minChunks: Infinity
9    }),
10    new webpack.optimize.CommonsChunkPlugin({
11        name: 'manifest'
12    })
13]

}

这时会有三个文件，vendor、main、manifest，这时再修改代码，再加一个！此时manifest和main发生变化，但是vendor没有发生变化，manifest发生变化是因为代码发生改变，要重新编译，这就达到了改变业务代码，但不改变vendor。

如果不用这种方法，就算vendor的代码不修改，打包出来的文件名的hash值也会发生改变。

2、引入新模块，模块顺序变化，vendor hash变化

问题：这时候进行打包，发现vendor的hash发生变化了，即便没有修改它，说明引入新模块的时候，又打破了原来的内容。

原因：之所以发生变化，在于给打包的同时，会给每个chunk给一个ID，当ID发生变化的时候，hash值也会发生变化。

1// foo.js
2import react from 'react'
3import module from './module'
4console.log('hello world foo!!')
5
6// module.js
7export default 'this is module'

解决方案：此时打包，原来的chunks是0 1 2，现在的chunks改为main、manifest、vendor

这次再次修改foo.js的代码并进行打包，这时vendor的hash值没有发生变化，而manifest和vendor都发生变化了

//插件数组添加上这个插件new webpack.NamedChunksPlugin(),new webpack.NamedModulesPlugin(),

3、在老版本中，动态引入模块时，vendor hash也会发生变化。（webpack3x已经解决这个问题）

问题：这时只改变了业务代码，这时打包，vendor的哈希没有发生变化，但是冬天引入的模块还是给了一个为0的id，而且没有chunkName，老版本会跟着chunk的变化而变化。

1// async.js
2export default {
3    name: 'async'
4}
5
6// foo.js
7import react from 'react'
8import module from './module'
9import('./async').then(function (a) {
10    console.log(a)   
11})
12console.log('hello world foo!!')

解决方案：

1import(/* webpackChunkName: 'async' */'./async').then(function (a) {
2    console.log(a)   
3})

三：在webpack4中怎么实现长缓存优化？

在webpack4中已经移除了commonChunkPlugin，直接配置即可。

1optimization: {
2    splitChunks: {      // 打包 node_modules里的代码
3        chunks: 'all'
4     },
5     runtimeChunk: true,  // 打包 runtime 代码
6}

vendor的hash值并没有发生改变。

The way of Webpack learning (VI.)

评论区

相关推荐