webpack vue框架代码&业务代码拆分

vue框架代码&业务代码拆分 需求分析

• 打包类库文件，第三方包、vue框架代码打包，这类代码稳定性比较高的
• 业务代码是经常更新迭代的
• 为了让浏览器尽可能长的时间缓存我们的静态文件，如果把类库代码和业务代码打包在一起，那么类库代码会跟着业务代码的更新而更新，而不能长时间的是浏览器里缓存，希望利用缓存，减少浏览器流量，提高用户浏览器加载速度，所以单独拆分出来进行打包

单独打包vue框架代码

• 在vendor 中 如果有其他框架，比如vue-router，或者vuex框架，也可以加入这个vendor数组中
• entry 的 vendor 要与下面的name: 'vendor’相等的，不然识别不了
• 在entry里没有声明过的一个名字，一般声明为runtime ，把生成在app.js里面的webpack相关的代码进行单独打包到一个文件里，这么打包的好处是在有新的模块加入的时候， webpack是会给每个模块加一个id上去，有新的模块加入的时候，插入的顺序有可能是在中间，导致后面每个模块的id发生变化，发生变化之后呢，就会导致我们打包出来的内容它的hash发生变化，那我们的hash想要利用浏览器的长缓存的作用就失去了效果，那么我们使用这种方法来规避这个问题。注意！！vendor一定要放在runtime的前面，不然会失去对应的作用

config.entry = {
    app: path.join(__dirname, 'src/index.js'),
    vendor: ['vue']
}
`
`
`
 config.plugins.push(
    new webpack.optimize.CommonsChunkPlugin({
         name: 'vendor'
     }),
    new webpack.optimize.CommonsChunkPlugin({
      	 name: 'runtime'
  	 })
 )
   

业务代码拆分打包

在这里插入代码片

hash 、 chunkhash 区别

• chunkhash
  • chunk 就是entry里面声明的不同的节点，使用异步加载的模块的时候，每一个异步加载的模块它也是一个chunk，每个chunk都会单独生成一个的hash，所以chunkhash就会有区别，所以一旦使用不同的entry或者类库单独打包的时候，必须使用chunkhash，如果不使用chunkhash，每次打包的时候，类库文件的hash也会变，那就没有意义了
• hash
  • 所有打包出来的每一个js模块都是同样一个hash，是整个应用的hash