微信小程序打包 common/vendor.js

微信小程序打包common/vendor.js是指将小程序中的通用代码、库文件、资源文件等集中打包成一个文件。

在微信小程序开发中，我们经常会使用到一些通用的代码或者库文件，例如一些第三方库、封装的工具类等。这些代码在不同的页面或组件之间都会被使用到，如果每个页面都单独引入这些代码，就会造成代码的冗余和重复加载，影响小程序的性能和加载速度。

为了解决这个问题，微信小程序提供了打包机制。通过将这些通用的代码集中打包成一个文件，可以减少重复的加载，并且在需要的地方引入这个打包文件即可。

common/vendor.js的打包过程如下：
1. 在小程序项目根目录下找到app.json文件，找到其中的"pages"字段，将所有的页面路径都列出来。
2. 根据页面路径和页面文件的import语句，分析出所有被引入到页面中的通用代码和库文件。
3. 将这些通用代码和库文件统一打包成一个vendor.js文件。这个文件中包含了各个通用代码和库文件的源代码。
4. 在页面的json配置文件中，通过"usingComponents"字段或"dependencies"字段引入vendor.js文件。这样，每个页面在加载时都会自动引入这个打包好的通用代码文件。

通过打包common/vendor.js，可以减少小程序的文件数量和大小，提高小程序的性能和加载速度。同时，也方便了开发者对通用代码和库文件的维护和更新，统一管理更加方便。

总之，微信小程序打包common/vendor.js是为了减少代码冗余和提高性能，通过将通用代码和库文件集中打包成一个文件，优化小程序的加载和运行效率。

相关问题

如何减少微信小程序vendor.js的大小

要减小微信小程序的 vendor.js 文件大小，可以考虑以下几个方法：

1. 分析依赖：使用工具分析项目依赖关系，检查是否存在冗余或不必要的依赖。删除不需要的依赖项，只保留必要的库和组件。

2. 使用压缩工具：使用压缩工具（如 UglifyJS、Terser）对代码进行压缩和混淆，减小代码体积。

3. 使用 Tree Shaking：如果你使用的是 ES6 模块化语法，可以使用 Tree Shaking 技术来消除未使用的代码。Tree Shaking 可以通过工具（如 webpack）自动检测和删除未被使用的代码块。

4. 使用按需加载：对于一些大型库或组件，可以考虑按需加载的方式，即只在使用时再动态加载。这样可以避免一次性加载全部代码，减少 vendor.js 的大小。

5. 图片优化：对于图片资源，可以使用压缩工具（如 tinypng）对图片进行压缩，减小文件大小。另外，可以选择适当的图片格式，如使用 WebP 格式可以进一步减小图片大小。

6. 使用 CDN 加速：将一些常用的第三方库或资源上传到 CDN（内容分发网络），通过 CDN 加速加载可以提高访问速度，并减少 vendor.js 文件的大小。

7. 定期更新依赖：及时更新第三方库和组件，以获取最新的版本和修复的 bug。新版本通常会对性能进行优化和代码进行精简。

通过以上方法，可以有效减小微信小程序的 vendor.js 文件大小，提升小程序的加载速度和性能。

ERROR in static/js/vendor.af81ec4f564add6695fe.js from UglifyJs SyntaxError: Unexpected token name «i», expected punc «;» [./~/vue/dist/vue.common.dev.js:99,0]报错怎么处理

这个错误一般是由于使用了不兼容的UglifyJS版本导致的。解决这个问题的方法有两种：

1. 升级UglifyJS版本：将UglifyJS升级到4.0以上的版本，例如使用UglifyJSWebpackPlugin 1.3.0以上的版本，这个版本已经解决了该问题。

2. 配置UglifyJS去除无用代码：在webpack的配置文件中，使用UglifyJSWebpackPlugin插件，并配置`uglifyOptions`，将`compress`选项中的`warnings`和`unused`设置为`true`，这样UglifyJS会去除掉无用的代码，从而解决该问题。配置示例如下：

   const UglifyJSWebpackPlugin = require('uglifyjs-webpack-plugin');
   
   // ...
   
   plugins: [
     new UglifyJSWebpackPlugin({
       uglifyOptions: {
         compress: {
           warnings: true,
           unused: true
         }
       }
     })
   ]

希望这些方法能够帮助到你。