vue项目实现按需加载的3种方式：vue异步组件、es提案的import()、webpack的req

X_AirDu 发布于2019-08-21 16:59 / 2653人阅读

摘要：但是，这种情况下一个组件生成一个文件。提供的配置路由，使用的技术，也可以实现按需加载。这种情况下，多个路由指定相同的，会合并打包成一个文件。举例如下详细代码在仓库项目路由配置文件

1. vue异步组件技术

vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。

但是，这种情况下一个组件生成一个js文件。
举例如下：

        {
            path: "/promisedemo",
            name: "PromiseDemo",
            component: resolve => require(["../components/PromiseDemo"], resolve)
        }

2. es提案的import()

推荐使用这种方式(需要webpack > 2.4)

webpack官方文档：webpack中使用import()

vue官方文档：路由懒加载(使用import())

vue-router配置路由，代码如下：

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import("../components/ImportFuncDemo1")
const ImportFuncDemo2 = () => import("../components/ImportFuncDemo2")
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: "ImportFuncDemo" */ "../components/ImportFuncDemo")
// const ImportFuncDemo2 = () => import(/* webpackChunkName: "ImportFuncDemo" */ "../components/ImportFuncDemo2")
export default new Router({
    routes: [
        {
            path: "/importfuncdemo1",
            name: "ImportFuncDemo1",
            component: ImportFuncDemo1
        },
        {
            path: "/importfuncdemo2",
            name: "ImportFuncDemo2",
            component: ImportFuncDemo2
        }
    ]
})

3. webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。

这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
举例如下：

        {
            path: "/promisedemo",
            name: "PromiseDemo",
            component: resolve => require.ensure([], () => resolve(require("../components/PromiseDemo")), "demo")
        },
        {
            path: "/hello",
            name: "Hello",
            // component: Hello
            component: resolve => require.ensure([], () => resolve(require("../components/Hello")), "demo")
        }

详细代码在github仓库：https://github.com/cag2050/vu...

项目路由配置文件：https://github.com/cag2050/vu...

GPU服务器私有云 vue的计算属性 vue的cdn加速 vue组件 webpack按需加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88982.html

webpack 基础与项目优化实践总结

摘要：前言本文基于，主要涉及基本概念基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行优化配置。同一文件中，修改某个影响其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和实际项目打包优化。关于概念方面参考官网，常用配置来自于网络资源，在文末有相关参考链接，实践部分基于自己的项目进行...

Scorpion 2019-08-23 18:15 评论0 收藏0
Vue.js 子组件的异步加载及其生命周期控制

摘要：本文主要对组件化开发中子组件的异步加载和其生命周期进行一些探讨。异步组件讨论异步加载，需要先了解下异步组件。生命周期控制在使用子组件或者叫局部注册时，我们可能需要在子组件实例化或者叫创建完毕后做某些事情。前端开发社区的繁荣，造就了很多优秀的基于 MVVM 设计模式的框架，而组件化开发思想也越来越深入人心。这其中不得不提到 Vue.js 这个专注于 VM 层的框架。本文主要对 Vue...

lidashuang 2019-08-22 11:17 评论0 收藏0
vue开发看这篇文章就够了

摘要：注意此处获取的数据是更新后的数据，但是获取页面中的元素是更新之前的钩子函数说明组件已经更新，所以你现在可以执行依赖于的操作。钩子函数说明实例销毁 Vue -渐进式JavaScript框架介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别？ Library 库，本质上是一...

fsmStudy 2019-08-21 18:37 评论0 收藏0
从0到1搭建webpack2+vue2自定义模板详细教程

摘要：安装安装完成之后，你应该可以使用了，方式如下上述命令应该自动在浏览器中打开。前言 webpack2和vue2已经不是新鲜东西了，满大街的文章在讲解webpack和vue，但是很多内容写的不是很详细，对于很多个性化配置还是需要自己过一遍文档。Vue官方提供了多个vue-templates，基于vue-cli用官方的webpack模板居多，不过对于很多人来说，官方的webpack模板的配...

cartoon 2019-08-20 16:38 评论0 收藏0
vue开发项目完全指南

摘要：有两种方法，一种是在开发环境中设置通过的，另一种是在服务器上修改的配置设置。这样我们以后使用访问接口就可以不加了，打包后访问也不用手动去除统一管理在项目开发过程中，会涉及到很多接口的处理，当项目足够大时，就需要统一管理接口。这篇文章总结了vue项目的所遇到的问题，包括跨域、用户认证、接口统一管理、路由配置、兼容性处理，性能优化等内容。项目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 评论0 收藏0