vue路由懒加载（异步按需加载）+ gzip

最新推荐文章于 2025-06-25 09:10:32 发布

转载最新推荐文章于 2025-06-25 09:10:32 发布 · 672 阅读

文章标签：

#vue-router懒加载

vue 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何将Webpack配置项进行优化，包括使用require懒加载代替import导入，并调整publicPath路径设置等，以提升前端项目的构建效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网
 转载

gzip参照此链接

import index from '@/pages/index/index'

转换成

const index = r => require(['@/pages/index/index'], r)

再添加

publicPath: './'

到(build/webpack.prod.conf.js中)

output: {
    path: config.build.assetsRoot,
    publicPath: './',
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

咸鱼与梦想

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue2进阶-第十三篇：Vue2路由懒加载优化（下）

无

05-01

在Vue2项目开发中，路由懒加载是提升应用性能的关键技术之一。在上一篇中，我们对路由懒加载有了初步的认识，这一篇我们将深入探讨Vue2路由懒加载优化的高级技巧，包括动态导入优化以及懒加载性能监控。

vue异步加载css,vue异步路由webpack打包后的样式加载问题（css异步加载问题？）...

weixin_42365539的博客

08-04

984

我一共有五个页面，采用了异步路由加载，后四个方式如下，这样按需加载每个路由页面，以免首屏加载过慢。这个样子，调试模式(dev)是没有任何问题的，样式能够显示出来，各种组件的样式以style分开清晰显示。但是npm run build打包以后的文件就不行了，webpack并没有将异步路由的vue的css文件给抽取出来，只抽取了用import方式引入组件的css，也就是index的css。我后面将异步...

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

vue+seajs实现按路由来异步按需加载模板和组件架构

05-28

vue+seajs实现按路由来异步按需加载模板和组件架构

vue路由按需加载（路由懒加载

qq_45316181的博客

07-04

431

vue路由按需加载（路由懒加载） vue的SPA（Single Page Application）应用里，当（webpack）打包构建时，会把所有的js打在一起，JavaScript 包会变得非常大，并在第一次请求时全部下载完毕，影响页面加载（性能）。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。目前有三种方式实现路由组件的懒加载，分别是： vue异步组件 es 的 import() webpack的require.ensur

Nuxt.js 路由配置全解析：router属性详解

最新发布

gitblog_00971的博客

06-25

419

Nuxt.js 路由配置全解析：router属性详解引言在Nuxt.js项目中，路由系统是构建单页应用(SPA)的核心功能之一。Nuxt.js基于Vue Router提供了开箱即用的路由功能，同时通过router配置属性允许开发者进行深度定制。本文将全面解析Nuxt.js中的router配置属性，帮助开发者掌握路由定制的各种技巧。基础路径配置(base) base属性用于设置应用的基础URL...

Vue 路由的懒加载和组件的按需加载方法

weixin_33991727的博客

07-24

407

// aview: function(resolve) { // require(["./a.vue"], resolve); // }, // bview: function(resolve) { // require(["./b.vue"], resolve); // } avi...

vue项目性能优化（路由懒加载、gzip加速、cdn加速）

Cool的博客

05-11

615

前端工程性能优化一说意义深远悠长，本章主要介绍除了一些基础优化外如何实行路由懒加载、Gzip加速、CDN加速，让网页飞的快一些。基础优化老生常谈的一些：不要在模板中写复杂的表达式慎用watch尤其是deep 合理的使用v-if/v-show/v-for 善用keep-alive 使用Object.freeze() ... 这里不再细开展~主要说下以下几点：一、开启GZIP 体积对比图： 1541KB vs 466KB 耗时对比图： 333ms vs 225ms 操作步骤：

Vue 路由的按需加载

qq_42576785的博客

11-14

507

作为前端小白的但是使用vue时记得我的路由表都是这样写的 import 名称 from 路径后来进入到公司发现公司完全不是用的这种都是用下面这种按需加载 但你使用了这种之后你npm run build 的时候打包出来的js 文件名就对应写在后面的名字 ...

Vue CLI 3 打包优化：路由懒加载与异步组件

"关于vue-cli 3配置打包优化要点，主要涉及路由懒加载、异步组件、代码压缩、引用别名、SCSS配置文件优化、减少HTTP请求等关键点，旨在提升Vue应用的性能和加载速度。" Vue CLI 3 是 Vue.js 的官方构建工具，提供了...

Vue2 项目首屏加载缓慢？这些优化技巧快收藏！

yan1915766026的博客

01-10

2015

通过以上多种优化方法的综合运用，我们能够显著提升 Vue2 应用的首屏加载速度，为用户带来流畅、高效的浏览体验。但优化工作并非一劳永逸，随着项目的迭代、业务的拓展以及技术的演进，我们需要持续关注首屏加载性能。一方面，不断审视项目中的新模块、新依赖，看是否有潜在的性能瓶颈，及时运用本文所讲方法进行处理。例如，后续引入新的第三方组件库时，立刻考虑按需引入策略，避免包体积膨胀。另一方面，密切关注前端技术领域的新动态，像新的打包优化算法、图片处理技术等，适时将其融入项目。

Vue项目优化：懒加载与Gzip压缩提升页面响应速度

本文主要探讨了如何通过路由懒加载和Gzip压缩来提升Vue项目加载速度，从而改善用户体验。首先，影响网页响应速度的关键因素包括HTTP请求次数、服务器处理能力、请求内容大小、JavaScript脚本执行时间以及浏览器的...

vue中的路由按需加载

hao_sir

07-12

207

import Vue from 'vue' import Router from 'vue-router' import Home from './pages/home' // import Login from './pages/login' import Index from './pages/index' // import Product from './pages/product' // import Detail from './pages/detail' // import Cart from

vue路由按需加载

qq_25503949的博客

07-30

362

vue路由按需加载 1》安装插件 npm install --save-dev @babel/plugin-syntax-dynamic-import 2》用promise的方式 3》但此时会发现在首页每个js对应一个import 进行了预加载没有达到真正的按需加载，进行优化在main.js中：由于修改了main.js要重启项目 ...

vue 路由按需加载

马优晨

11-25

651

在vue项目中，一般引入组件都是用import import 组件名 from '组件路径' webpack在npm run build的时候会打包成一个整个的js文件，如果页面一多，会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载 1. require.ensure() webpack提供的require....

vue中路由的按需加载

weixin_42446516的博客

06-01

1269

在vue中我们经常在router.js中这样配置我们的路由表 import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) export default new Router({ routes: [ { ...

vue实现路由按需加载

wyw223的博客

02-25

570

1.使用vue异步组件的方式 vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) },{ ...

性能优化---vue路由懒加载和异步组件

qq_42931285的博客

10-03

2570

1.路由懒加载 整个网页默认是刚打开就去加载所有页面，路由懒加载就是只加载你当前点击的那个模块。实现方式有： 1.require：加载组件。 component: resolve => require(["@/view/system/login/Login"], resolve)； 2.import引入 const Login = ()=> import(’@/views/login/index.vue’) 2.异步组件：在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需.

vue项目实现路由按需加载(路由懒加载)

weixin_43826136的博客

02-23

1523

1. 方法如下：component：resolve=>(require(['需要加载的路由的地址'])，resolve) Vue.use(Router) const alarmDictionarys = [ {//报警字典 path: '/index', name: 'index', component: resolve => require(['@/views/pages/index.vue'], resolve), }, .

vue、vue-router切割js,实现按需加载

web前端开发

03-22

6461

前言：随着前端技术的发展，富页面越来越多，如果将所有模块打包为一个js,必然会影响性能，所以按需加载是大势所趋 ********** 只需两步，就能实现第一步：定义router.js 第二步：添加webpack配置信息更多详细信息，可访问github地址：https://github.com/chuanzaizai/vue-load-on-demand