vue2 vue.min.js和vue-cli-service build --target lib 构建的.min.js的压缩原理,使用的什么库 源码分析

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来压缩的(Terser是从uglify-es fork 过来的,并且保留它原来的大部分API以及适配uglify-es和uglify-js@3等

2 vue2

 搜min,可以搜到

https://github.com/vuejs/vue/blob/v2.6.11/scripts/build.js

function buildEntry (config) {
  const output = config.output
  const { file, banner } = output
  const isProd = /(min|prod)\.js$/.test(file)
  return rollup.rollup(config)
    .then(bundle => bundle.generate(output))
    .then(({ output: [{ code }] }) => {
      if (isProd) {
        const minified = (banner ? banner + '\n' : '') + terser.minify(code, {
          toplevel: true,
          output: {
            ascii_only: true
          },
          compress: {
            pure_funcs: ['makeMap']
          }
        }).code
        return write(file, minified, true)
      } else {
        return write(file, code)
      }
    })
}

可以看到vue2也是用的terser

 

 

 

posted @ 2023-11-11 15:19  hrdom  阅读(108)  评论(0编辑  收藏  举报