框架篇-面试题3-vue-cli 脚手架编译后,如果存在过大的 js 文件怎么处理?

最新推荐文章于 2024-04-29 16:37:48 发布

itclanCoder

最新推荐文章于 2024-04-29 16:37:48 发布

阅读量244

点赞数

文章标签： css js less 编程语言 javascript

本文链接：https://blog.csdn.net/wzc_coder/article/details/108860593

版权

本文介绍了处理Vue CLI构建后产生过大JS文件的四种方法：将静态库外部引入、配置externals、路由懒加载、剥离文件单独打包及开启压缩。提供了相关插件安装和配置指导，旨在帮助开发者优化项目性能。

摘要由CSDN通过智能技术生成

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

方案1: 把一些不常改变的库放到index.html中,通过cdn的方式引入

<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>

然后找到

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

itclanCoder

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Java+vue部署版本反编译

阿尔法星球的专栏

09-25

799

在对Java和Vue项目的反编译研究中，我们评估了多种工具的性能，包括编译速度、语法支持和代码可读性。编译速度：CFR以其轻量级和高速度在处理大量文件时表现出色，而JD-GUI和JD-Core在处理单个文件时速度较快。reverse-sourcemap在Vue项目中的编译速度则取决于项目的大小和复杂度。语法支持：JD-GUI、CFR和JD-Core都提供了对现代Java语言特性的良好支持，包括Lambda表达式和Stream API。

Vue进阶（五十二）：vue-cli 脚手架 webpack

2401_84447390的博客

04-29

370

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】96道前端面试题：常用算法面试题：内容主要包括HTML，CSS，JavaScript，浏览器，性能优化。

参与评论您还未登录，请先登录后发表或查看评论

vue脚手架项目打包成app_React和Vue脚手架项目打包编译后如何打开

weixin_29960041的博客

02-22

296

1.React项目1、安装npm install -g serve2、package.json文件加入 "homepage":"http://myname.github.io/myapp",3、项目中运行 server -s buildReact打包后直接打开index.html,需要在package.json文件中"private": true,下面加入 "homepage":"./"...

js大文件上传解决方案(500M以上)

weixin_52041354的博客

09-06

914

文件上传页面的前端可以选择使用一些比较好用的上传组件，例如百度的开源组件WebUploader，泽优软件的up6，这些组件基本能满足文件上传的一些日常所需功能，如异步上传文件，文件夹，拖拽式上传，黏贴上传，上传进度监控，文件缩略图，甚至是大文件断点续传，大文件秒传。分块上传，分块处理逻辑应该是最简单的逻辑了，up6已经将文件进行了分块，并且对每个分块数据进行了标识，这些标识包括文件块的索引，大小，偏移，文件MD5，文件块MD5（需要开启）等信息，服务端在接收这些信息后便可以非常方便的进行处理了。

vue编译JS文件过大的优化方案

麻瓜哇哇哇的博客

10-16

2546

https://segmentfault.com/a/1190000010955172 https://www.jianshu.com/p/332c4d8de7d7 简介想要进行优化，首先我们要知道问题所在，

解决vue-cli npm run build之后vendor.js文件过大的问题

最新发布

2401_84447417的博客

04-29

574

/ 挂载静态资源，下面的方法是用虚拟目录来访问资源，staticPath就是虚拟目录路径，其实不管设不设置都是static。// 下面的staticPath是 static ，path.posix.join其他配置文件中我已经介绍了，这里不再赘述。// app.use是在响应请求之前执行的，用来指定静态路径，挂载静态资源。// 下面结果就是 ‘http://localhost:8080’// 下面是es6的promise规范，用来处理嵌套请求的。_resolve() // 这里没有传递数据，只是在模拟。

Vue 前端小白了解并运用Vue3 + Vite 及 Vue-cli 4项目搭建_vue3 vite vue-cli-service(1)

m0_60750088的博客

04-18

439

更新更快更强！Performance：性能比 vue2.x 块 1.2 ～ 2 倍Tree shaking support：支持按需编译，体积更小Composition API：组合 API，类似 React HooksCustom Renderer API：暴露了自定义渲染 APIFragment，Teleport（Protal），Suspense：新增三个组件Better TypeScript support：更好的支持 TS让开发更简单！

安装vue-cli&使用vue-cli搭建项目

qq_64001795的博客

09-26

5079

vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。xxx 为自己创建项目的名称必须先安装vue,vue-cli，webpack，node等一些必要的环境*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 , 和。这三个部分分别代表了 html,js,css。

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

JEECG官方博客

12-17

4504

今天小编就为大家分享一篇解决vue-cli脚手架打包后vendor文件过大的问题。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧大家会遇到打包后文件很大，导致页面初始化加载的速度很慢。会出现白屏的现象。这一般是你打包的vendor太大的缘故。如果你打包后看到你的vendor文件有700kb以上。你就要考虑怎么处理。处理这种文件的 1、把不常改变的库放到index.html...

vuejs,webpack 打包之后的项目 demo

04-04

vue 相关的js，webpack打包文

如何从零创建一个vue项目

一个有节操的码农

09-26

973

一、如何创建一个vue-cli项目安装cnpm，执行命令npm install -g cnpm 安装vue-cli，执行命令cnpm insall -g vue-cli 初始化项目，vue init webpack test 二、在vue-cli项目中使用scss语法 1.安装sass-loader和node-sass（sass-loader依赖于node-sass） npm inst...

Vue2.0史上最全入坑教程—— 搭建Vue脚手架（vue-cli）

paranoidMao

03-28

2205

面试面试vue，开始自学，从搭建vue脚手架开始。最近，vue.js越来越火。在这样的大浪潮下，我也开始进入vue的学习行列中，在网上也搜了很多教程，按着教程来做，也总会出现这样那样的问题（坑啊，由于网上那些教程都是Vue.js 1.x版本的，现在用Vue.js 的构建工具都已经升级到2.0版本了），经过了一段时间的摸索和看官方的教程和api，才了解到2.0版本在1.0版本的基础上做了好...

vue编译完文件过大处理

weixin_45124398的博客

07-05

1207

前言在之前做的项目中，因为是第一次和别人合作做项目，只有我们两个人（一个前端和后端的同学），所以尽管项目本身并不大，但是是完全的自主开发，所以开发之路充满了坎坷，无论是后端对接，接口定义规则还是开发规范都需要我们两个人自己进行商量了解。再加上随着项目的深入，技术上的匮乏逐渐明显。这也就导致了随着暑假的到来，我们不得不中止项目的进行转而两人去继续深入的学习需要的技术。我会在之后陆续总结当前阶段项目进行中遇到的各种稀奇古怪的问题。今天先总结第一个问题的解决方案（vue编译之后文件过大）简介这是一个在项目

大前端公开课——必玩必会的CLI脚手架（Vue面试问答技巧）

qq_42721138的博客

04-25

364

昨晚听了大前端的一节公开课——必玩必会的CLI脚手架，老师讲的很好，思路、逻辑都很清晰，课程中讲到了几个Vue的面试题的解答思路，我截屏做了一下整理，以便以后反复理解。 [目录] 目录[目录]1、v-if和v-for哪个优先级更高？2、你知道key的作用吗？3、能说说双向绑定以及它的实现原理吗？4、你了解vue中的diff算法吗？5、vue组件之间的通信方式？6、简单说一说你对vuex的理解1、......

vue-cli3快速搭建 TypeScript 基础脚手架教程

本文将详细介绍如何使用Vue CLI 3 脚手架搭建一个基于TypeScript (TS) 的基础项目，这对于前端开发人员尤其有价值，因为TS 是一种强大的静态类型系统，有助于提高代码质量与可维护性。以下是步骤详解： 1. 准备工作...