vue2 vue.min.js和vue-cli-service build --target lib 构建的.min.js的压缩原理 源码分析

发布时间 2023-11-11 15:23:55作者: hrdom

1 vue-cli-service  --target lib

https://github.com/vuejs/vue-cli/blob/f0f254e4bc81ed322eeb9f7de346e987e845068e/packages/%40vue/cli-service/lib/commands/build/index.js#L5

可以看到这里formats: 'commonjs,umd,umd-min',默认有三种格式,其中的umd-min经过了压缩

再去搜umd-min

https://github.com/vuejs/vue-cli/blob/f0f254e4bc81ed322eeb9f7de346e987e845068e/packages/%40vue/cli-service/lib/commands/build/resolveLibConfig.js#L146

可以看到

  const configMap = {
    commonjs: genConfig('commonjs2', 'common'),
    umd: genConfig('umd', undefined, true),
    'umd-min': genConfig('umd', 'umd.min')
  }

  function genConfig (format, postfix = format, genHTML) {

......

    // only minify min entry
    if (!/\.min/.test(postfix)) {
      config.optimization.minimize(false)
    }

查看webpack配置文档

https://webpack.js.org/configuration/optimization/#optimizationminimize

告诉 webpack 使用 TerserPlugin 或者 Optimization.minizer 中指定的插件来最小化捆绑包。

所以就是用的Terser来压缩的

2 vue2