HYN慢慢琢磨一些技术。。。
首页/文章列表/Webpack 分包 ----- 打包or不打包的选择/
Webpack 分包 ----- 打包or不打包的选择
2021-06-18 16:30:41 Web 100人阅读

本文代码基于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的内容,在版本不变的情况下,使得打包后的文件名也不变。

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

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

前端~
文章目录
externals
使用方式:
预期效果:
splitChunks
使用方式:
预期效果: