分割打包文件

4-2 webpack区分打包类库代码及hash优化                                                                                                                                                                           

 webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

把打包生成的APP文件中的webpack相关的代码单独打包到一个文件中，name指定的一定是在entry中没有声明过的文字。一般是runtime。

这是解决什么问题的呢？

因为每个chunk文件会有一个id，

当使用了多个的entry时，使用chunkhash命名，不要使用hash，hash是整个entry生成的，每个chunk也是一样的。

使用webpack.optimize.CommonsChunkPlugin把指定的公共类库单独打包成，name指定的(vendor)命名，要和上面的(vendor)一致。

类库分开打包

1. 为什么？

2. 怎么做？

        webpack.optimize.CommonsChunkPlugin

webpack.optimize.CommonsChunkPlugin:单独打包第三方类库代码

为什么要把第三方类库和业务逻辑代码分离打包？
如果把业务逻辑代码和第三类库打包到一起，整个类库代码就需要随着业务代码的更新而更新，这样类库代码就不能在浏览器里进行缓存。

为了尽可能的使用浏览器缓存来减少服务器流量，以及用户加载速度更快，所以单独拆分出来进行打包

hash 指所有的js文件都是一个hash值

chunkhash 指从js中分离出来的类库与js业务逻辑代码的hash不同

为什么要分离出来呢？高效的利用浏览器缓存，如果不分离每次修改业务逻辑代码导致js类库也会更新一次，效率低

hash 和 chunkhash 区别，就是 hash 是给同批次打包的文件用的相同的hash数，而chunkhash是根据每个chunk块单独用一个hash值

entry.vendor 属性作用是提取第三方库，会将指定的第三方库打包成一个 vendor.js 而不会和业务代码打包在一起  -- webpack 4 移除

问题：用splitChunks取代后，没有像老师编译后那样出现vendor.xxxx.js而是出现了三个bundle.xxx.js

学习：

• hash和chunkhash的区别

• webpack4 中已经删掉 代码分割 CommonsChunkPlugin，把其中的方法全部归到optimization.splitChunks中。

  
  

参考链接：

https://webpack.js.org/plugins/split-chunks-plugin/#src/components/Sidebar/Sidebar.jsx

runtime

单独打包框架代码1

单独打包框架代码

hash 是所有打包js文件的hash值，而chunkhash是不同chunk不同的值

hash与chunkhash的区别:

hash是整个项目的哈希，只有一个

chunkhash是分类打包会生成不一样的hash

目的：为了让非业务代码可以在浏览器内实现长缓存。

trunk hash

第三方插件单独打包   vendor['vue']或者其他第三方引入的插件

一、hash和chunkhash的区别：

整个应用是同一个hash

entry里的节点对应不同的chunkhash

如果是单独打包就用chunkhash

二、name:runtime：生成在app.js的内容，有新的模块加入时，webpack会给每个内容加上一个Id,可能插入在中间，所以id都会改变

new webpack.optimize.CommonsChunkPlugin({

name: 'vendor'

}),

//vendor一定要放在runtime前面，否则会失去对应的作用

new webpack.optimize.CommonsChunkPlugin({

name: 'runtime'

})

//作用：把webpack相关的代码单独打包到一个文件，好处：在新的模块加入时，文本webpack给每一个新的模块一个新的id。有新模块加入的时候，插入的顺序可能是在中间，会导致后面的模块的id就会发生变化，从而导致打包出来的内容的hash发生变化，那么hash想要使用浏览器常缓存的作用就失去了效果。使用这个配置方法就可以规避这个问题。

hash chunkhash 的区别

chunkhash 可理解为 在entry中声明的不同节点，我们使用异步加载时，每一个异步加载的模块也是一个chunk

使用hash时，所有打包出来的每一个js模块都是同样一个hash，是整个应用的hash。

使用chunkhash的话，每一个chunk单独生成一个hash。

所以一旦使用了不同的entry，或者将类库文件单独打包时，必须要使用chunkhash，否则单独打包就没有任何意义，因为每次业务代码更新，他的render的hash也会变。