vue cli3.x 打包 路由懒加载

注意
如果您使用的是 Babel,你将需要添加 syntax-dynamic-import 插件,才能使 Babel 可以正确地解析语法。

在vue-cli3.0里面使用路由懒加载需要安装syntax-dynamic-import插件
npm install --save-dev @babel/plugin-syntax-dynamic-import

  • 安装之后 在 babel.config 修改
module.exports = {
  presets: [
    '@vue/app'
  ],
  "plugins": [
    [
      '@babel/plugin-syntax-dynamic-import'
    ]
  ]
}

把组件按组分块

  • 注释语法来提供 chunk name (需要 Webpack > 2.4)
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

新的vue-cli3.0突然发现network一下子全请求了,懒加载无效 发现在vue-cli3.0中会为所有的js和css资源增加prefetch参数,app、vendors会增加preload参数。
组件提前用prefetch请求,组件使用时创建时动态创建script标签

  • vue.config.js增加如下配置,取消prefetch和preload
 chainWebpack(config) {
    config.plugins.delete('preload') 
    config.plugins.delete('prefetch') 
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,278评论 1 22
  • 原文:https://www.cnblogs.com/zhanyishu/p/6587571.html, 根据原文...
    涔_dd90阅读 1,731评论 0 0
  • vue-cli3项目搭建配置以及性能优化 在之前的开发中主要用的是vue-cli2,最近空闲时间比较多,接下来有新...
    bayi_lzp阅读 19,503评论 16 68
  • 响应式布局的理解 响应式开发目的是一套代码可以在多种终端运行,适应不同屏幕的大小,其原理是运用媒体查询,在不同屏幕...
    懒猫_6500阅读 805评论 0 0
  • 一、什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。 二、为什么需要懒加载 在单页...
    菲菲菲菲妞阅读 22,098评论 0 10