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

转载于:https://www.cnblogs.com/yunspider/p/9248795.html

vue-router 按需加载相关推荐

vue router按需加载
1 import Vue from 'vue' 2 import Router from 'vue-router' 3 4 Vue.use(Router); 5 //按需加载,当渲染其他页面时才加载其 ...
webpack和vue的按需加载组件、console、抓包
1.webpack和vue的按需加载组件 webpack特有的懒加载文件的方式,很大的提升了webpack打包SPA应用的在性能方面. 而从webpack2以后require.ensure已经被imp ...
vue 路由按需加载
在vue项目中,一般引入组件都是用import import 组件名 from '组件路径' webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非 ...
vue tree组件_Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战
JeecgBoot实战 - 按需加载方案一.Ant-Design-Vue 按需加载 1.创建js文件 src/components/lazy_antd.js import Vue from 'vue ...
ant design pro取消登录_JeecgBoot实战按需加载 Ant-Design-Vue和Icon
一.Ant-Design-Vue 按需加载 1.创建js文件 src/components/lazy_antd.js import Vue from 'vue'// base library impo ...
Ant-Design-Vue和Icon按需加载方案 - JeecgBoot实战
JeecgBoot实战 - 按需加载方案文章目录 JeecgBoot实战 - 按需加载方案一.Ant-Design-Vue 按需加载二.Icon按需加载一.Ant-Design-Vue 按需加 ...
vue 按需加载，换存，导航守卫
开发中的注意事项:代码性能的优化 1. 减少对第三方的依赖,降低耦合度 2. 加强组件的重复利用率 3. 按需加载 4. 缓存 (尽量发送请求后保存数据) 5. 开发过程中,尽量有着面向对象的思想,这 ...
vue项目实现按需加载的3种方式
vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件用例: {path: '/promisedemo',name: 'Pr ...
Vue根据菜单json数据动态按需加载路由Vue-router
每个菜单项对应一个页面组件,根据菜单项动态按需加载路由路由配置的正确写法: /*router/index.js*/ import Vue from 'vue' import Router from ...
vue组件的按需加载
一.require.ensure() require.ensuire(dependencies:String[],callback:function(require),errorCallback:fu ...

vue-router 按需加载

vue-router 按需加载相关推荐

最新文章

热门文章