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 ...
随机推荐
- 聚类算法——KMEANS算法
聚类概念 无监督问题:我们手里没有标签 聚类:相似的东西分到一组 难点:如何评估,如何调参 基本概念 要得到簇的个数,需要指定K值 质心:均值,即向量各维取平均即可 距离的度量:常用欧几里得距离和余弦 ...
- 转一篇 ShaderVariantCollection介绍的比较详细的文章 感谢作者
http://www.seven-fire.cn/archives/174 Unity3D Shader加载时机和预编译 焱燚(七火) | 2016年7月6日 | UnityShader ...
- file_put_contents结合print_r,打造日志功能
<?php $log = []; $log['name'] = '张三'; $log['age'] = '15'; $log['date'] = date('Y-m-d'); echo prin ...
- hibernate框架入门配置
1.新建一个项目(可以是java项目,也可以是webapp) 2.导入jar包,包括日志,mysql驱动,必备request包,jpa配置规范包 3.创建实体类 1.创建数据库,使用hibernate ...
- c++ cmakelist 详解
基本元素 首先cmaklist必须包括以下几个部分: #工程名 project(study_case) #cmake最低版本需求 cmake_minimum_required(VERSION 2.8. ...
- [HTML]js读取XML文件并解析
xml文件:test.xml <?xml version="1.0"?> <note> <to>George</to> <fr ...
- 利用vue-cli3快速搭建vue项目详细过程
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- Android 虹软免费人脸识别 SDK开发
目前我们的应用内使用了 ArcFace 的人脸检测功能,其他的我们并不了解,所以这里就和大家分享一下我们的集成过程和一些使用心得集成ArcFace FD 的集成过程非常简单在 ArcFace FD 的 ...
- lua --- dofile、loadfile、require
loadfile: 1>编译代码成中间码并且返回编译后的chunk作为一个函数,而不执行代码 2>在发生错误的情况下,不会抛出异常,但会返回nil和错误信息 3>运行一个文件多次的话 ...
- SublimeText3按ctrl+b执行python无反应
现象:在Sublime中打开.py文件,按”ctrl+b”执行时无反应.点击工具->编译系统中已经有且识别到Python,但执行”run(ctrl+shift+b)”时无反应,Sublime左下 ...