vue如何split_vue代码分割的实现(codesplit)

最新推荐文章于 2024-06-29 07:00:00 发布
最新推荐文章于 2024-06-29 07:00:00 发布
阅读量2.8k 收藏
点赞数
文章标签： vue如何split
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36354817/article/details/113548977
版权
本文介绍如何在Vue单页应用中实现代码分割，以提高首次加载速度和整体性能。通过路由按需加载和组件按需加载两种方式，详细说明了如何将vue文件拆分为多个bundle，实现按需加载，降低首次加载的js文件大小。
摘要由CSDN通过智能技术生成

在vue单页应用中，若不做任何处理，所有vue文件会打包为一个文件，这个文件非常的大，造成网页在首次进入时比较缓慢。做了代码分割后，会将代码分离到不同的bundle中，然后进行按需加载这些文件，能够提高页面首次进入的速度，网站性能也能够得到提升。

一、未分割时浏览器加载js的情况

435fad73e429fa0eb060b76aef4f90ef.png

可以看到，只有一个app.js，大小为595kb，若在实际的大型项目中，这个大小会更大

二、做了代码分割后浏览器加载js情况

8b0a2e6b824bcea6d90ec7c0076b998e.png

发现多了一个js文件，且app.js大小也变小了，下面看看点击到其他页面时加载情况

7f894f4d1a11f9cf16d83715f1077159.png

点到其他页面后，页面会依次加载当前页面的js

三、代码中如何使用

该demo中使用的vue版本号为2.5.2，不同版本的使用方式可能会有所不同

最低0.47元/天 解锁文章
金晓宇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深入浅出Vite：Vite打包与拆分
xiangzhihong8的专栏
06-12 2123
针对更细粒度的拆包，Vite 的底层打包引擎 Rollup 提供了manualChunks，让我们能自定义拆包策略，它属于 Vite 配置的一部分，示例如下。build: {output: {// manualChunks 配置},},manualChunks 主要有两种配置的形式，可以配置为一个对象或者一个函数。我们先来看看对象的配置，也是最简单的配置方式，你可以在上述的示例项目中添加如下的manualChunks配置代码。
vue代码分割的实现(codesplit)
10-17
主要介绍了vue代码分割的实现(codesplit)，做了代码分割后，会将代码分离到不同的bundle中，然后进行按需加载这些文件，需要的朋友可以参考下
vite项目优化高级特性：代码分割、分块打包、动态导入、按需加载使用案例
05-10 1735
Vite 是一个现代化的前端构建工具，它利用了浏览器原生 ES 模块导入特性来提供快速的冷启动和即时的模块热更新。Vite 在开发环境下使用原生 ES 模块，而在生产环境下则使用 Rollup 进行打
Vite: 代码分割与拆包
最新发布
Wang的专栏
06-29 1723
在生产环境下，为了提高页面加载性能，构建工具一般将项目的代码打包(bundle)到一起，这样上线之后只需要请求少量的 JS 文件，大大减少 HTTP 请求。当然，Vite 也不例外，默认情况下 Vite 利用底层打包引擎 Rollup 来完成项目的模块打包。某种意义上来说，对线上环境进行项目打包是一个必须的操作。但随着前端工程的日渐复杂，单份的打包产物体积越来越庞大，会出现一系列应用加载性能问题，而代码分割可以很好地解决它们。
Vite如何打包分割代码
天渺(喵)工作室
08-28 1万+
Vite配置如何优雅的code spliiting代码分割前端生态 rollup 和 webpack都有的概念。如果把所有代码都打包到一起，可能最终的代码非常大。从而影响加载时间。而且，很多代码是初始加载时，不需要的。因此，我们可以根据代码使用的紧急程度，将代码分割打包后，可以按需加载。.........
Vite打包分割代码
u014212540的博客
05-10 997
Vite打包分割代码
Vite知识体系简述
Flying____fish的博客
08-13 500
新一代前端构架工具No-bundle开发服务，源文件无需打包生产环境基于Rollup的Bundler高性能，dev启动速度和热更新速度非常快简单医易用,开发者体验好传统构架工具遇到的问题缓慢的启动=>项目编译等待成本告缓慢的热更新=>修改代码后不能实时更新瓶颈bundle带来的性能开销JS语言的性能瓶颈。.........
代码分割：打包完产物体积太大，怎么拆包？
江拥羡橙的博客
06-30 2644
针对更细粒度的拆包，Vite 的底层打包引擎 Rollup 提供了build : {output : {// manualChunks 配置 manualChunks : {主要有两种配置的形式，可以配置为一个对象或者一个函数。我们先来看看对象的配置，也是最简单的配置方式，你可以在上述的示例项目中添加如下的build : {output : {// manualChunks 配置 manualChunks : {
vue大型项目拆分_vue代码分割的实现(codesplit)
weixin_39713578的博客
12-20 1826
在vue单页应用中，若不做任何处理，所有vue文件会打包为一个文件，这个文件非常的大，造成网页在首次进入时比较缓慢。做了代码分割后，会将代码分离到不同的bundle中，然后进行按需加载这些文件，能够提高页面首次进入的速度，网站性能也能够得到提升。一、未分割时浏览器加载js的情况可以看到，只有一个app.js，大小为595kb，若在实际的大型项目中，这个大小会更大二、做了代码分割后浏览器加载js情况...
split-pane:基于Vue 实现面板分割组件
05-09
在本文中，我们将深入探讨如何基于Vue.js框架实现一个面板分割组件。Vue.js是一个轻量级、高性能的前端JavaScript框架，被广泛用于构建用户界面。面板分割组件在各种Web应用中非常常见，它允许用户动态调整两个或多...
Vue代码分割懒加载的实现方法
08-28
Vue代码分割懒加载的实现方法 本文主要介绍了 Vue 代码分割懒加载的实现方法，并通过示例代码详细介绍了懒加载的概念、为什么需要懒加载、如何与 Webpack 配合实现组件懒加载，以及在 Vue 中实现代码分割懒加载的...
在vue项目中使用codemirror插件实现代码编辑器功能
10-16
通过以上步骤，我们已经成功地在Vue项目中实现了`codemirror`代码编辑器，它具有代码高亮和自动提示功能。当用户在编辑器中活动时，`cursorActivity`事件会触发`showHint`函数，为用户提供实时的代码提示。 总结...
vue_shop项目全部代码.zip
10-12
Vue_shop项目是基于Vue.js构建的一个电子商务平台的示例项目，它展示了如何利用Vue.js及其相关生态技术来实现一个完整的网上购物应用。 1. **Vue.js核心概念** - **虚拟DOM**：Vue.js使用虚拟DOM来提高性能，通过...
vue-split-pane:使用Vue.js的可调拆分窗格
05-02
Vue分割窗格使用Vue.js的可调拆分窗格安装# yarn (recommend)$ yarn add vue-split-pane# npm$ npm install vue-split-pane --save用法CDN < script src =" https://unpkg.com/vue-split-pane " > </ ...
vue实现codemirror代码编辑器中的SQL代码格式化功能
10-16
主要介绍了vue实现codemirror代码编辑器中的SQL代码格式化功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue外卖二十五：优化：路由懒加载，实现打包时拆分app.js为多个、图片懒加载、
*
12-16 2065
一、路由懒加载，实现打包时拆分app.js为多个 当完成项目进行打包后npm run build，会把自己写的所有js代码放入【app.js】里； npm run serve/npm run dev开发运行时，则在内存中打包成app.js； 当各个页面的js代码逻辑非常多时，会造成运行慢，卡 此时，使用路由懒加载写法，打包时，可把app.js根据不同页面拆分成多个如1.js、2.js等等。 开发运行时也会打包拆分成1.js。。。 一般只在主页面上用此方法 使用懒加载效果如下： 懒加载写法 route
vue-cli4打包最强优化（10M变300kb）
热门推荐
田兴的博客
10-15 2万+
一、去除生产环境sourceMap sourceMap资源映射文件，存的是打包前后的代码位置，方便开发使用，这个占用相当一部分空间 module.exports = { // 根据你的实际情况更改这里 publicPath, assetsDir: 'assets', lintOnSave: true, productionSourceMap: false, } 二、对资源文件进行压缩 需要下载 compression-webpack-plugin cnpm i compression
Vue实现红包雨动画效果
以下将详细解析标题和描述中提到的“vue代码实现红包雨的”知识点。 首先，这段代码使用 Vue.js 框架来构建一个简单的红包雨动画。Vue.js 是一款轻量级的前端框架，它允许开发者通过声明式地编写组件来构建用户界面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值