vue的单页面(SPA)项目,必然涉及路由按需的问题。
以前我们是这么做的

//require.ensure是webpack里面的,这样做会将单独拉出来作为一个chunk文件
const Login = r => require.ensure( [], () => r (require('../component/Login.vue')));

但现在无Vue-router的官网看看,推荐这种方式:

//vue异步组件和webpack的【代码分块点】功能结合,实现了按需加载
const App = () => import('../component/Login.vue');

可是,很多情况下,我们这么写npm控制台直接报错,这是为什么呢?

Module build failed: SyntaxError: Unexpected token

原来是import这儿报错了,这就需要babel的插件了,vue-router官网上有一段提示:
如果您使用的是 Babel,你将需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法。
至此,问题全部解决了。

如果使用vue-cli生成项目,很可能在babel-loader没有配置上面的插件,这时需要我们自己去安装此插件:

npm install babel-plugin-syntax-dymic-import --save-dev

然后修改js的loader部分:

{
test: /\.js$/,
loader:'babel-loader',
options:{
plugins:['syntax-dynamic-import']
},
},

增加了option选项,至此,能识别我们const App = () => import('../component/Login.vue');的语法了

在打包的时候,发现我们如果只是这么写:const App = () => import('../component/Login.vue');出现的chunk包名字都是乱的,如果我们指定命名,该怎么办呢?webpack3提供了Magic Comments(魔法注释)

const App = () => import(/* webpackChunkName:'login'*/ '../component/Login.vue');

这样我们就为打包出来的chunk指定一个名字,最终生成login.js的chunk包。

// 下面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')

转自:https://www.cnblogs.com/xiaochongchong/p/7772773.html

https://segmentfault.com/a/1190000011519350

vue-router 按需加载的更多相关文章

  1. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  2. vue router按需加载

    import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); //按需加载,当渲染其他页面时才加载其组件,并缓存,减少首 ...

  3. 原创《分享(Angular 和 Vue)按需加载的项目实践优化方案》

    针对前端优化的点有很多,例如:图片压缩,雪碧图,js/css/html 文件的压缩合并,  cdn缓存, 减少重定向, 按需加载 等等 最近有心想针对 ionic项目 和 vue项目,做一个比较大的优 ...

  4. Vue Router的懒加载路径

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...

  5. vue项目按需加载的3种方式

    本文重要是路由打包优化: 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 1.vue异步组件技术 vue-router配置路由,使用vue的异步组件技术 ...

  6. React Router 按需加载+服务器渲染的闪屏问题

    伴随着React协议的『妥协』(v16采用MIT),React为项目的主体,这个在短期内是不会改变的了,在平时使用过程中发现了如下这个问题: 在服务器渲染的时候,刷新页面会出现闪屏的现象(白屏一闪而过 ...

  7. vue实现按需加载(懒加载)

    1.router文件中使用 export default new Router({ routes: [{ path: '/', name: 'Post', component: () => im ...

  8. Vue按需加载提升用户体验

    Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...

  9. vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对

    部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

  10. vue中路由按需加载的几种方式

    使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...

随机推荐

  1. Java中JSONObject相关操作

    maven项目pom配置: <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>js ...

  2. iOS获取UUID

    转自:<iOS获取设备的唯一标识的方法总结以及最好的方法> 参考:<获取iOS设备唯一标识> 总结一下: 1.代码采用CFUUID+KeyChain的实现方式. 2.CFUUI ...

  3. 牛客国庆集训派对Day3 A Knight

    Knight 思路: bfs打表找规律 如下图 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) ...

  4. 通过 rufus 创建启动U盘,安装 VMWare Esxi

    现在谁还用光盘安装系统啊. 做出启动盘后,U盘启动进行安装才是王道. https://www.starwindsoftware.com/blog/create-an-esxi-6-5-installa ...

  5. JavaScript 第十章总结:first class functions

    前言 这一章的内容是 advanced knowledge and use of functions. 讲了关于 function 的使用的一些特殊的方面. function expression 的 ...

  6. Spring之Spel表达式

    正常业务场景一般不用这个技术,但需要知道有这么个东西支持Spring. 记忆力不好,抄了些套路代码便于以后用到. package com.paic.phssp.springtest.spel; imp ...

  7. linux: 安装jdk(java)

    作为Java开发人员,在Linux下安装一些开发工具是必备技能,本文以安装jdk为例,详细记录了每一步的操作命令,以供参考. 0.下载jdk8 登录网址:http://www.oracle.com/t ...

  8. mq/mysql/redis/nginx常见服务&工具安装

    单机版 3.1安装工具 3.1.1 安装Maven工具 3.1.1上传安装包 1)root用户创建安装目录如/usr/local /maven:   mkdir -p /usr/local/maven ...

  9. 20165327 2017-2018-2 《Java程序设计》第6周学习总结

    20165327 2017-2018-2 <Java程序设计>第6周学习总结 教材内容总结 第八章 String类常用方法 public int length() public boole ...

  10. spring ----> 事务:传播机制和接口TransactionDefinition

    spring事务: 编程式事务(细粒度) 声明式事务(粗粒度,xml或者注解格式) spring接口TransactionDefinition: TransactionDefinition接口定义了事 ...