vue-router 按需加载
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 按需加载的更多相关文章
- 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)
1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...
- vue router按需加载
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router); //按需加载,当渲染其他页面时才加载其组件,并缓存,减少首 ...
- 原创《分享(Angular 和 Vue)按需加载的项目实践优化方案》
针对前端优化的点有很多,例如:图片压缩,雪碧图,js/css/html 文件的压缩合并, cdn缓存, 减少重定向, 按需加载 等等 最近有心想针对 ionic项目 和 vue项目,做一个比较大的优 ...
- Vue Router的懒加载路径
单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...
- vue项目按需加载的3种方式
本文重要是路由打包优化: 原理:利用webpack对代码进行分割是懒加载的前提,懒加载就是异步调用组件,需要时候才下载. 1.vue异步组件技术 vue-router配置路由,使用vue的异步组件技术 ...
- React Router 按需加载+服务器渲染的闪屏问题
伴随着React协议的『妥协』(v16采用MIT),React为项目的主体,这个在短期内是不会改变的了,在平时使用过程中发现了如下这个问题: 在服务器渲染的时候,刷新页面会出现闪屏的现象(白屏一闪而过 ...
- vue实现按需加载(懒加载)
1.router文件中使用 export default new Router({ routes: [{ path: '/', name: 'Post', component: () => im ...
- Vue按需加载提升用户体验
Vue官方文档异步组件: 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了让事情更简单, Vue.js 允许将组件定义为一个工厂函数,动态地解析组件的定义.Vue.js 只在组 ...
- vue单页面打包文件大?首次加载慢?按需加载?是你打开方式不对
部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...
- vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
随机推荐
- cookie 简单用法
cookie 简单用法 //当前登录人的组织Id HttpCookie SingleValueCookie = new HttpCookie("DepartmentId", &qu ...
- string截取、替换、查找子串函数,find_first_of 用法
1. 截取子串 s.substr(pos, n) 截取s中从pos开始(包括0)的n个字符的子串,并返回 s.substr(pos) 截取s中从从pos开始(包括0)到末尾的所有字符的子串,并返回 2 ...
- 树莓派 无屏幕 安装Ubuntu系统 无头安装 无显示器 用网线
能看到此篇博客的人说明都尝试失败了,会发现内存卡刷入Ubuntu后,无法通过ssh操作树莓派.是因为官方的ubuntu系统在初次运行时需要设定一些东西,类似windows第一次启动也需要设置那样,如果 ...
- python 启动新进程执行脚本
import subprocess p_restart=subprocess.Popen(['/bin/sh','/etc/init.d/xxx_service','reboot'])
- Mybatis拦截器(一)
拦截器需要实现 interceptor接口 public interface Interceptor { //3 对目标对象拦截进行处理的内容 Object intercept(Invocation ...
- python web py安装与简单使用
web.py是一个轻量级的python web框架,简单而且功能强大.相对flask和Django,web.py更适合初学者来学习和了解web开发的基础知识. 安装: pip install we ...
- 力扣 (LeetCode)657. 机器人能否返回原点
在二维平面上,有一个机器人从原点 (0, 0) 开始.给出它的移动顺序,判断这个机器人在完成移动后是否在 (0, 0) 处结束. 移动顺序由字符串表示.字符 move[i] 表示其第 i 次移动.机器 ...
- Hive json字符串解析
在做数据测试时,会遇到数据库表里字段类型为json 的情况,而我们可能只关注该字段中的各别内容的信息,如下 content {"测试内容1":,"测试内容2": ...
- vue 里面引入高德地图
效果图: 实现: 一:引入 高德,web-sdk (两种方式) 1:在html 中引入(我用的这一种) <script type="text/javascript" src= ...
- Pytorch Visdom可视化工具
2018-12-04 14:05:49 Visdom是Facebook专门为PyTorch开发的一款可视化工具,其开源于2017年3月.Visdom十分轻量级,但却支持非常丰富的功能,能胜任大多数的科 ...