如何解决uni-app编译后 vendor.js 文件过大

目录
  • uni-app编译后vendor.js文件过大
    • 前景
    • 运行后发现
  • 小程序分包后vendor还是过大
    • 添加以下代码

uni-app编译后vendor.js文件过大

前景

采用uni-app开发的微信小程序，发布时工具提示vendor.js过大，已经跳过es6向es5转换。查看后发现编译后代码中common/vendor.js已超过500k，所以需要体积控制。

  • HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码
  • 使用cli创建的项目，可以在pacakge.json中添加参数–minimize，示例：“dev:mp-weixin”: “cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize”

运行后发现

vendor.js文件减少到了二百多k。

小程序分包后vendor还是过大

使用分包之后会发现遇到了一个奇怪的问题，子包的组件和js文件会被打包到主包的vendor.js文件中，这就导致了vendor.js过大引起主包超过2M

打开manifest.json —> 源码视图 —> mp-weixin节点下

添加以下代码

"optimization": {
    "subPackages": true
}

会发现分包的js文件将不会再打包到主包的vendor.js中了，亲测管用

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用vue打包时vendor文件过大或者是app.js文件很大的问题

    第一次使用vue2.0开发,之前都是用的angular1.x.在使用vue-cli脚手架打包后(UI用的Element-ui),发现vendor文件很大,将近1M左右..后来翻阅资料才明白,原来webpack把所有的库都打包到了一起,导致文件很大. 我的解决办法: 1.把不常改变的库放到index.html中,通过cdn引入,比如下面这样: 然后找到build/webpack.base.conf.js文件,在 module.exports = { } 中添加以下代码 externals: { '

  • 基于vue-cli npm run build之后vendor.js文件过大的解决方法

    问题 vue-cli npm run build命令默认把dependencies中的依赖统一打包,导致vendor.js文件过大,出现首屏加载过于缓慢的问题. 解决方案 像vue.axios.element-ui这些基本上不会改变的依赖我们可以把它们用cdn导入,没有必要打包到vendor.js中. 1.在项目根目录index.html使用cdn节点导入 <div id="app"></div> <!-- 先引入 Vue --> <!--开发

  • 解决vue打包后vendor.js文件过大问题

    第一步.cdn引入各种包 index.html中cdn的方式引入vue.vuex.axios.element-ui.vue-router等包,如下图: 第二步.在使用vue等包的地方,注释掉import引入 在所有使用vue的地方注释掉引入的vue等包,但是Vue.use(axios).Vue.use(VueRoter).Vue.use(vuex)等依然要使用,除了Vue.use(ElementUI), 如果加上这句话,还是会打包element-ui到vendor.js文件中 在main.js

  • 如何解决uni-app编译后 vendor.js 文件过大

    目录 uni-app编译后vendor.js文件过大 前景 运行后发现 小程序分包后vendor还是过大 添加以下代码 uni-app编译后vendor.js文件过大 前景 采用uni-app开发的微信小程序,发布时工具提示vendor.js过大,已经跳过es6向es5转换.查看后发现编译后代码中common/vendor.js已超过500k,所以需要体积控制. HBuilderX创建的项目勾选运行–>运行到小程序模拟器–>运行时是否压缩代码 使用cli创建的项目,可以在pacakge.jso

  • 解决idea 项目编译后没有class文件的问题

    解决idea 项目编译后没有class文件的问题

    问题 idea项目突然无法运行,提示找不到某个类.查看了编译输出目录out,发现没有class文件. 尝试解决 尝试删除out.重新导入项目.在gradle面板点击刷新,都没能解决问题. 问题解决 最后,点击Build->Rebuild Project解决.不明原因,先做下记录. 补充知识:IDEA项目无法引用本地Class类,而且各种报错 背景 今天从git 上下载下来的项目,在别的机器上都可以正常运行,然而到了我的机器上,就各种报错,而且本地的class文件也无法引用. 1.删掉项目,重新下

  • 解决vue-cli脚手架打包后vendor文件过大的问题

    大家会遇到打包后文件很大,导致页面初始化加载的速度很慢.会出现白屏的现象.这一般是你打包的vendor太大的缘故.如果你打包后看到你的vendor文件有700kb以上.你就要考虑怎么处理. 处理这种文件的 1.把不常改变的库放到index.html中,通过cdn引入,比如下面这样: <script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script> <script src="https:

  • 利用vscode调试编译后的js代码详解

    利用vscode调试编译后的js代码详解

    前言 在开发的过程中,几乎不可能一次性就能写出毫无破绽的程序,断点调试代码是一个普遍的需求. vscode 是一个非常棒的编辑器,内置功能强大的调试能力.经过简单的设定,就可以对 js 文件进行调试.但有时我们想要调试的内容是经过编译的,当然我们可以直接调试编译后的代码.但经过编译压缩以后的代码,可读性很差,且也可能无法分模块查看了,有什么方法进行编译前的代码调试么?答案当然是肯定的. 下面话不多说了,来一起看看详细的介绍吧. vscode 的常规调试 vscode 的调试界面在窗口最左边: 最

  • vue中的vendor.js文件过大问题及解决

    vue中的vendor.js文件过大问题及解决

    目录 vue vendor.js文件过大问题 1. cdn 引入 2. 在使用vue等包的地方,注释掉import引入 3. 打包忽视掉vue等包 vue打包降低vendors.js文件大小 vue打包项目优化 vue vendor.js文件过大问题 1. cdn 引入 index.html中cdn的方式引入vue.vuex.axios.element-ui.vue-router等包,代码如下: <script src="https://cdn.bootcdn.net/ajax/libs/

  • vue打包chunk-vendors.js文件过大导致页面加载缓慢的解决

    vue打包chunk-vendors.js文件过大导致页面加载缓慢的解决

    目录 打包chunk-vendors.js过大导致页面加载缓慢 1.chunk-vendors.js 简介 3.chunk-vendors.js 文件大小分析 3.方式一 4.其他方式 chunk-vendors过大导致首屏加载太慢的优化 1.安装compression-webpack-plugin插件 2.接下来要去修改vue的配置文件 vue.config.js 3.nginx配置 打包chunk-vendors.js过大导致页面加载缓慢 1.chunk-vendors.js 简介 顾名思义

  • vite2打包的时候vendor-xxx.js文件过大的解决方法

    vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,这就郁闷了. 打包时遇到警告 输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk) Some chunks are larger than 500kb after minification. Consider: Using dynamic import() to code-split the

随机推荐