UniApp 打包发布到微信平台，过大的 vendor.js 文件优化全攻略
2023-09-21 18:10:55
优化 UniApp 构建产物的体积
随着 UniApp 的普及，越来越多的开发者选择使用其开发小程序和 App。然而，在开发过程中，如何优化构建产物的体积，以便提升应用性能，成了开发者们面临的普遍难题。本文将从多方面探讨如何有效减小 UniApp 构建产物的体积，帮助开发者打造轻巧高效的应用。
一、慎重选择第三方库
在 UniApp 开发中，使用第三方库可以快速提升开发效率，但选择不当也可能导致构建产物体积大幅增加。因此，在引入第三方库时，除了考虑其功能和性能，还需要关注其体积。尽量选择体积较小的库，或使用按需加载的方式来减少引入的代码量。
代码示例：
// 按需加载第三方库
import { Button } from 'vant';
export default {
components: {
[Button.name]: Button
}
};
二、代码分包
UniApp 提供了分包功能，可以将项目中的代码拆分成多个子包，从而减少主包的大小。将一些非核心功能或不常用的页面放入子包中，可以有效减轻主包的负担。在进行分包时，需要注意以下几点：
- 合理划分子包：根据功能或页面归属，将代码合理划分到不同的子包中。
- 控制子包大小：每个子包的大小不宜过大，一般不超过 2MB。
- 按需加载子包：在页面需要时再加载对应的子包，避免一次性加载所有子包。
代码示例：
// 分包配置
module.exports = {
subPackages: [
{
root: 'pages/sub-package-a',
pages: ['index']
},
{
root: 'pages/sub-package-b',
pages: ['index']
}
]
};
三、使用按需加载
对于一些体积较大但只在某些页面或组件中使用到的库或代码，可以采用按需加载的方式来减少初始加载时的代码量。按需加载可以分为两种方式：
- 按需加载第三方库：使用一些按需加载第三方库的工具，例如 webpack 的 splitChunks 插件，可以将第三方库的代码拆分成多个块，并在需要时按需加载。
- 按需加载代码块：对于项目中的代码块，也可以使用按需加载的方式来减少初始加载时的代码量。可以使用 webpack 的 code splitting 功能或 UniApp 的异步组件来实现按需加载。
代码示例：
// 按需加载代码块
const MyComponent = () => import('./MyComponent.vue');
export default {
components: {
MyComponent
}
};
四、使用 CDN
对于一些常用的第三方库或资源，可以考虑使用 CDN 来加载，这样可以减轻服务器的负担，同时提高加载速度。在使用 CDN 时，需要注意以下几点：
- 选择合适的 CDN 服务商：选择一家可靠且稳定的 CDN 服务商，确保 CDN 能够稳定运行。
- 配置 CDN 域名：在项目中配置 CDN 域名，以便浏览器能够从 CDN 上加载资源。
- 优化 CDN 缓存：设置合适的 CDN 缓存策略，以便浏览器能够有效利用 CDN 缓存，减少加载时间。
代码示例：
// 使用 CDN 加载第三方库
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/vue@3.2.36/dist/vue.global.prod.js';
document.head.appendChild(script);
五、使用构建工具优化代码
在构建项目时，可以使用一些构建工具来优化代码，减少代码的大小。这些构建工具通常会使用各种优化算法来压缩代码，移除不必要的代码，并生成更优化的代码。常用的构建工具包括 webpack、Rollup 和 Babel。
代码示例：
// 使用 webpack 优化代码
module.exports = {
optimization: {
minimize: true,
splitChunks: {
chunks: 'all'
}
}
};
六、使用 source map
在开发过程中，为了便于调试，通常会使用 source map 来将编译后的代码映射回源代码。但是，source map 会增加代码的大小，在生产环境中是不需要的。在构建项目时，可以关闭 source map 的生成，以减小代码的大小。
代码示例：
// 关闭 source map
module.exports = {
productionSourceMap: false
};
七、使用压缩工具
在构建项目后，可以使用一些压缩工具来进一步减小代码的大小。这些压缩工具通常会使用各种算法来压缩代码，移除不必要的空格和注释，并优化代码结构。常用的压缩工具包括 UglifyJS、Terser 和 Brotli。
代码示例：
// 使用 Terser 压缩代码
const terser = require('terser');
const result = terser.minify(code);
结论
通过以上几种方法，可以有效减小 UniApp 构建产物的体积，从而提升应用性能，改善用户体验。在实际开发中，需要根据项目需求和实际情况，综合采用这些方法，才能达到最佳的优化效果。
常见问题解答
1. 如何选择合适的第三方库？
在选择第三方库时，需要综合考虑其功能、性能、体积和维护情况。尽量选择体积较小的库，或使用按需加载的方式来减少引入的代码量。
2. 代码分包的最佳实践是什么？
在进行代码分包时，需要根据功能或页面归属，合理划分子包。每个子包的大小不宜过大，一般不超过 2MB。同时，还需要按需加载子包，在页面需要时再加载对应的子包。
3. 如何使用 CDN 来优化性能？
在使用 CDN 时，需要选择一家可靠且稳定的 CDN 服务商。在项目中配置 CDN 域名，以便浏览器能够从 CDN 上加载资源。同时，还需要优化 CDN 缓存，设置合适的缓存策略，以便浏览器能够有效利用 CDN 缓存，减少加载时间。
4. 构建工具的优化有什么好处？
构建工具可以通过各种优化算法来压缩代码，移除不必要的代码，并生成更优化的代码。使用构建工具可以有效减小代码的大小，提升应用性能。
5. 为什么需要使用 source map 和压缩工具？
source map 在开发过程中用于便于调试，但在生产环境中是不需要的。关闭 source map 的生成可以减小代码的大小。压缩工具则可以通过各种算法进一步压缩代码，减小其体积，提升应用性能。
