美文网首页
Vue模块异步加载探索

Vue模块异步加载探索

作者: Nicholasway | 来源:发表于2017-03-10 11:09 被阅读376次

异步按需加载,需要做以下两个操作

1.在webpack.config中,output增加以下配置

output: {
    path: config.build.assetsRoot,
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
    filename: '[name].js',
    chunkFilename:"[name]-[hash:8].js"
  }

chunkFilename:"[name]-[hash:8].js"

2.配置router

参考:按需加载

//import Index from './components/Index'
const Index = resolve => require(['./components/Index'], resolve)
//import Draf from './components/Draf'
const Draf = resolve => require(['./components/Draf'], resolve)
//import CreateQues from './components/create/CreateQues'
const CreateQues = resolve => require(['./components/create/CreateQues'], resolve)
//import published from './components/published'
const published = resolve => require(['./components/published'], resolve)

相关文章

  • Vue模块异步加载探索

    异步按需加载,需要做以下两个操作 1.在webpack.config中,output增加以下配置 chunkFil...

  • AMD

    AMD, Asynchronous Module Definition,即异步模块加载机制,它采用异步方式加载模块...

  • react记录 二

    目录 一.react异步加载组件,分模块加载,提高打开性能 二. 三. 四. 一.react异步加载组件,分模块加...

  • vue.js v1 懒加载实践

    vue指南说,可以异步加载component vue指南 => 异步加载组件 注意 下面的内容假设你已经学会: w...

  • webpack打包代码实现

    webpack模块加载 异步模块加载 通过 import()实现指定模块的懒加载操作 懒加载的核心原理就是创建js...

  • JS 模块化方案对比

    1. CommonJS 规范(同步加载 NodeJS) 2. AMD(异步加载模块 requireJS) 采用异步...

  • SplitChunks插件配置选项

    chunks选项,决定要提取那些模块。默认是async:只提取异步加载的模块出来打包到一个文件中。异步加载的模块:...

  • 模块化编程--require使用

    AMD--require AMD规范:异步模块加载机制 服务器端 -- 同步加载 浏览器端 -- 异步加载 ...

  • AMD规范和CMD规范

    AMD(异步模块定义规范)制定定义模块的规则,模块和模块的依赖是异步加载的。 AMD通过define()函数定义一...

  • vue项目实现按需加载的3种方式:vue异步组件技术、es提案的

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。但是,这种情况...

网友评论

      本文标题:Vue模块异步加载探索

      本文链接:https://www.haomeiwen.com/subject/ykungttx.html