syntax-dynamic-import插件实现懒加载

syntax-dynamic-import实现懒加载

1 npm install --save-dev @babel/plugin-syntax-dynamic-import

2  在根目录新建一个babel.config.js文件  （注意：本实例采用vuecli3）如果没安装ui组件库作如下配置：

module.exports = {

  presets: [

    '@vue/cli-plugin-babel/preset',

  ],

  "plugins": [

    [

      '@babel/plugin-syntax-dynamic-import'

    ]

  ]

}

如果安装了相关ui组件库则作如下配置 

在根目录新建一个babel.config.js文件  （注意：本实例采用vuecli3）

module.exports = {

"presets": [

"@vue/app"

],

"plugins": [

[

"component",

{

"libraryName": "element-ui",

"styleLibraryName": "theme-chalk"

},

"syntax-dynamic-import"

]

]

}

特别注意"syntax-dynamic-import"在plugins中的顺序。plugins[0][1]必须是对象或者undefinde或者null。如果syntax-dynamic-import 位置放的不对将会报错

3 在router.js文件中路由作如下配置

const routes = [

{

path: '/',

name: 'initPage',

component: ()=>import(@v/InitPage/index.vue'),

},

{

path: '/loading',

name: 'loading',

component:（）=> import(/'@v/loading/index.vue')

},

{

path: '/login',

name: 'login',

component: (）=> import(/'@v/loading/login.vue')

},]

注意。因为我再webpack中做了路径的别名配置

@v实际上的路径是src/views

但是如果每次都要写成

(）=> import(/'@v/loading/login.vue')是不是显得有些多余？我们可以封装一个函数：

const getComponents =(name,title)=>{

console.log("name:",name)

if(!title){

return () =>import(`@v/${name}/index.vue`)

}else{

return () =>import(`@v/${name}/${title}.vue`)

}

}

这样代码就可以如下：