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

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

时间:2023-11-11 15:36:35浏览次数:42  
标签:vue cli min js umd output

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

 

 

 

标签:vue,cli,min,js,umd,output
From: https://www.cnblogs.com/hhdom/p/17825953.html

相关文章

  • odoo16前端框架源码阅读——rpc_service.js
    odoo16前端框架源码阅读——rpc_service.js先介绍点背景知识,这样方便阅读代码。一、JSONRPC的规范https://www.jsonrpc.org/specification中文翻译版本:https://wiki.geekdream.com/Specification/json-rpc_2.0.htmlJSON-RPC是一个无状态且轻量级的远程过程调用(RPC)协议。本规......
  • js执行的比dom渲染快很多,执行完一定的js才在页面渲染一次dom,UI渲染是宏任务
    假设HTML有一个按钮id为btn,经过以下操作最终会变成什么颜色?document.getElementById('btn').style='background:blue';document.getElementById('btn').style='background:red';Promise.resolve().then(()=>{document.getElementById('......
  • vue里面数据
    <template><div><BaseCountItem></BaseCountItem><br><BaseCountItem></BaseCountItem><br><BaseCountItem></BaseCountItem></div></template><script>importBaseCo......
  • vue完成记事本小功能(没有css样式)
    app.vue<template><divclass=""><SchuRuKuang@Add="handleAdd"></SchuRuKuang><LieBiaoZhanShi:list="list"@delOne="handledelOne"></LieBiaoZhanShi><TongjiQingKo......
  • js常见的继承方式包括原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继
    js常见的继承方式包括原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承,以及ES6新增的class继承,但不包括关联继承https://www.cnblogs.com/Leophen/p/11401734.html构造函数继承是每次继承都会把父类的所有属性方法全部拷贝一份,而对于公用的方法......
  • 下面哪些方式在同一个窗口下能够检测一个js对象是数组类型?
    下面哪些方式在同一个窗口下能够检测一个js对象是数组类型?AArray.isArray()BinstanceofCtypeofDObject.prototype.toString.call()正确答案:ABDA:Array为js的原生对象,它有一个静态方法:Array.isArray(),能判断参数是否为数组B:instanceof运算符返回一个布尔值,表示对象是......
  • Lodash-前端 js工具库
    官网:Lodash简介|Lodash中文文档|Lodash中文网(lodashjs.com) import_from'lodash'constdialogHandler=(val)=>{if(val){listCompanyByCurrentUserIdFn()if(!_.isEmpty(props.dialogData.id)){baseDialog.value.setProps({......
  • Vue下载与配置
    好细的Vue安装与配置_vue配置-CSDN博客......
  • js实现深拷贝
    functiondeepClone(obj,hash=newWeakMap()){if(obj===null)returnobj//如果是null或者undefined我就不进行拷贝操作if(objinstanceofDate)returnnewDate(obj)if(objinstanceofRegExp)returnnewRegExp(obj)//可能是对象或者普通的值如果是......
  • Js选择器总结
    Js选择器总结 一、原生JS选择器#JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()A:getElementById(ID):返回对指定ID的第一个对象的引用,如果在文档中查找一个特定的元......