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

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

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

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

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

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

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

三、代码中如何使用

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

1、首先，看一下路由按需加载的做法

下面是修改前的代码

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

import page1 from '@/page/page1'

import page2 from '@/page/page2'

import page3 from '@/page/page3'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

component: HelloWorld

{

path: '/page1',

component: page1

{

path: '/page2',

component: page2

{

path: '/page3',

component: page3

}

]

})

此时，我们只需将

import page1 from '@/page/page1'

改为

const page1 = () => import('@/page/page1')

这样，我们在切换路由时便达到按需加载了，怎么样，是不是很简单

2、在组件中按需加载其他组件

我们还是先来看看修改前的代码，此时引用组件的方式为传统正常的方式

import vOther from '@/components/other'

export default {

components: {

vOther

}

我们只需做如下修改，便能达到我们想要的效果，将

import vOther from '@/components/other'

改为

const vOther = () => import('@/components/other')

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

vue如何split_vue代码分割的实现(codesplit)相关推荐

前端每周清单第 30 期：WebVR 指南，Vue 代码分割范式，理想的 React 架构特性
前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点:分为新闻热点.开发教程.工程实践.深度阅读.开源项目.巅峰人生等栏目.欢迎关注[前端之巅]微信公众号(ID:front ...
代码分割（Code Splitting）
代码分割(Code Splitting) 为什么要分割代码?代码分割有什么作用呢? 答:两个方面. 1.项目包含第三方依赖库以及自己写的代码,打包出的文件会比较大,在用户访问系统的时候,由于请求的资源 ...
16 代码分割之错误边界与Suspense和命名导出
代码分割之错误边界与Suspense const Main = React.lazy(() => import('./main')) class ErrorBoundary extends Re ...
Webpack进阶（二）代码分割 Code Splitting
源代码index.js里包含2部分 ① 业务逻辑代码 1mb ② 引入(如lodash包)的代码 1mb 若更新了业务逻辑代码,但在浏览器运行时每次都下载2mb的index.js显然不合理,第三方包是 ...
13 代码分割之import静动态导入
前端首屏优化方案之一项目构建时会整体打包成一个bundle的JS文件,而有的代码.模块是加载时不需要的,需要分割出来单独形成一个文件块chunk(不会打包在main里),让模块懒加载(想加载时才加载 ...
css-6 df15,webpack 样式文件的代码分割(15)
获取全套webpack 4.x教程,请访问瓦力博客在上一小节,我们将开发环境和生产环境区分开来.这一小节,我们来操作如何将样式文件的代码分割. 1.安装 yarn add mini-css-extr ...
webpack打包生成的map文件_一站式搞明白webpack中的代码分割
上次分析到通过devtool的配置项来设置source map,在线上环境可以通过设置成cheap-module-source-map来生成单独的map文件,但是map文件在线上环境会不会每次都加载呢 ...
vue项目示例代码git_您应该了解的5个Git命令以及代码示例
vue项目示例代码git I've used Git for some years now, and I still find myself googling how to do some basic ...
css练习题4,复习webpack4之CSS文件代码分割
之前学习过webpack3的知识,但是webpack4升级后还是有很多变动的,所以这次重新整理一下webpack4的知识点,方便以后复习. 这次学习webpack4不仅仅要会配置,记住核心API,最好 ...

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

vue如何split_vue代码分割的实现(codesplit)相关推荐

最新文章

热门文章