Webpack 分包 ----- 打包or不打包的选择

本文代码基于webpack4。

开门见山，先说目的：分包，目的是配合浏览器缓存，命中缓存，无需下载，提升体验。

打包or不打包指的是两条路：

打包：splitChunks；

不打包： externals；

externals

使用方式：

举个例子，vue三件套。

// webpack.config.js
module.exports = {
  externals: { // 此处配置不参与打包的 package
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
  },
};

在对应的 index.html 中，需要用<script>引入对应依赖。

<script src=https://cdn.jsdelivr.net/combine/npm/vue@2.6.12,npm/vuex@3.5.1,npm/vue-router@3.4.3></script>

写代码时正常import即可，webpack会帮你衔接好全局引入的依赖，你不需要考虑太多。

可搭配 HtmlWebpackPlugin 使用，实现本地启动dev server时使用 node_modules 中的依赖，打包时<script>，方便使用某些开发状态下特有的功能，具体不展开，有很多文章写过。。。很好找。

预期效果：

1. 通过script标签直接引入的依赖，搭配浏览器的缓存机制，可以达到跨项目、跨版本共享的效果，提升用户加载速度。
2. 打包速度提升（少打包了一些js文件嘛）。

splitChunks

使用方式：

依旧是vue三件套，独立打包。

这个写法强制把vue、vuex、vue-router单独打包成一个文件，打包后会得到形似：chunk-hahahaha.afd6a08b.js，这样的结果。

同样，用户什么都不用管，正常写代码就行。

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // include all types of chunks
      cacheGroups: {
        hahahaha: {
          name: 'chunk-hahahaha',
          test: /[\\/]node_modules[\\/]((vue)|(vuex)|(vue-router))[\\/]/, // vue三件套不打包
          priority: 10,
          chunks: 'initial', // only package third parties that are initially dependent
        },
      },
    },
  },
};

预期效果：

通过限制chunk的内容，在版本不变的情况下，使得打包后的文件名也不变(内容不变，hash不变嘛)。

这样，在发布新版后，配合协商缓存的机制，能利用本地缓存。（没法跨项目共享，略显可惜）

这里需要注意一个问题，虽然文件名不变，但要考虑发版后 Last-Modified 时间变化的情况，这时需要后端对协商缓存的策略进行把控，或在发版时注意----同名文件就不要覆盖了。