vue代码拆分的实现

在vue单页应用程序中，所有vue文件将被打包成一个文件，无需任何处理。这个文件很大，使得网页第一次进入比较慢。代码分段后，将代码分离成不同的包，然后按需加载这些文件，可以提高首次页面进入的速度和网站性能。

首先，浏览器在js未被分割时加载它

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

其次，浏览器在代码分段后加载js

发现多了一个js文件，app.js的大小也变小了。让我们看看点击其他页面时的加载情况

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

第三，如何在代码中使用它

本演示中使用的vue版本号为2.5.2，不同版本的使用可能会有所不同

1.首先，看一下按需装载的路线

以下是修改前的代码

从“vue”导入Vue从“vue-router”导入Router从“@/components/HelloWorld”导入HelloWorld从“@/page/page1”导入page2从“@/page/page2”导入page3从“@/page/page3”导入Vue.use(Router)导出默认的新Router({ routers : [{ Path :/

从“@/page/page1”导入page1已更改为

const page 1=()=import(' @/page/page 1 ')。因此，当我们切换路线时，我们可以按需加载。怎么样？很简单吗？

2.根据需要加载组件中的其他组件

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

从“@/components/other”导入vother导出默认值{ components: { vother } }我们只需进行以下修改即可达到所需的效果

从“@/组件/其他”导入v其他更改为

const v other=()=import(' @/components/other ')以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。