webpackd打包两次-生成两份代码-出现legacy的js文件-编程知识

webpackd打包两次-生成两份代码-出现legacy的js文件

当我们build后dist文件中出现legacy的js文件。

原因：
pack.json文件；

{
*****"browserslist": ["> 0.03%","not dead"]
}

当我们项目运行在古老的浏览器上面时（表示支持市场份额超过 > 0.03% 的浏览器版本），甚至在初始的webpack下都不满足旧版浏览器的兼容，webpack5为我们提供了browserslist配置来轻松构建较为健全的兼容Polyfills的转化。自动二次打包出兼容的文件代码。关于以上配置可查看往期文章 vue-cli5.0.x优雅降级，配置项目兼容旧版浏览器
所以有了以上配置。但是更随而来的“代价”便是有了二次构建打包出兼容性更好的egacy的js文件。其实最直观的感受就是打包的速度变慢了
同时这也是vue-cli的现代模式正常生产build下的产物vue-cli现代模式,可以通过改变构建命令来规避（跳过）这个为兼容而二次打包的过程。（不是最佳解决方案）

在这里插入图片描述

解决方案

一、反正就是为了兼容的不要把browserslist配置的太离谱即可

"dependencies" : {},
"devDependencies": {},
"browserslist": ["> 1%","last 2 versions","not dead","not ie 11"
]

二、手动规避：不需要 type=“module”
2.1 可以yarn build --no-module
yarn build --no-module说明打包之后,不生成<script type="module">

npx vue-cli-service help build可以查看 build 后面可添加的指令

Usage: vue-cli-service build [options] [entry|pattern]Options:--mode         specify env mode (default: production)--dest         specify output directory (default: dist)--no-module    build app without generating <script type="module"> chunks for modern browsers--target       app | lib | wc | wc-async (default: app)--inline-vue   include the Vue module in the final bundle of library or web component target--formats      list of output formats for library builds (default: commonjs,umd,umd-min)--name         name for lib or web-component mode (default: "name" in package.json or entry filename)--filename     file name for output, only usable for 'lib' target (default: value of --name)--no-clean     do not remove the dist directory contents before building the project  --report       generate report.html to help analyze bundle content--report-json  generate report.json to help analyze bundle content--skip-plugins comma-separated list of plugin names to skip for this run--watch        watch for changes--stdin        close when stdin ends

使用:vue-cli-service build [options] [entry|pattern]选项:——mode指定env模式(默认为production)
——dest指定输出目录(默认:dist)
——no-module不生成&lt;script type="module"&gt;现代浏览器的块
——target app | lib | wc | wc-async(默认:app)
——inline-vue将Vue模块包含在库或web组件目标的最终包中
——格式化库构建的输出格式列表(默认:commonjs,umd,umd-min)
——name lib或web组件模式的名称(默认:package. name)。Json或条目文件名)
——filename用于输出的文件名，仅用于'lib'目标(默认:——name的值)
——no-clean在构建项目之前不要删除dist目录的内容
生成report.html来帮助分析包的内容
——report-json生成报告Json来帮助分析包的内容
——skip-plugins用逗号分隔的要跳过的插件名称列表
——注意观察变化
——stdin结束时关闭