Vue路由组件按需加载的几种方法

淡淡的烟草味﹌ 2022-01-19 00:57 360阅读 0赞

## 1. 普通加载 ##

*  使用vue-cli构建项目后，我们会在Router文件夹下面的index.js里面引入相关的路由组件,如：

import Hello from '@/components/Hello'
    import Boy from '@/components/Boy'
    import Girl from '@/components/Girl'
    复制代码

*  这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件，如果页面一多，会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载

## 2. `webpack`的`require.ensure()`实现按需加载 ##

*  语法：`require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)`
    
     *  dependencies：字符串构成的数组，声明 callback 回调函数中所需的所有模块,模块作为依赖被加载
     *  callback：只要加载好全部依赖，webpack 就会执行此函数。require 函数的实现，作为参数传入此函数。当程序运行需要依赖时，可以使用 require() 来加载依赖。函数体可以使用此参数，来进一步执行 require() 模块。
     *  errorCallback：当 webpack 加载依赖失败时，会执行此函数。
     *  chunkName：由 require.ensure() 创建出的 chunk 的名字。通过将同一个 chunkName 传递给不同的 require.ensure() 调用，我们可以将它们的代码合并到一个单独的 chunk 中，从而只产生一个浏览器必须加载的 bundle。
 *  使用方法一：

require.ensure([], function(require){
        require('./a.js');
    });
    // 此时会单独打包出一个js文件，没有自定义名称的话，会被命名为1.js(有hash时候会带上md5)
    复制代码

*  使用方法二：

require.ensure(['./a.js'], function(require) {
        require('./b.js');
    });
    1、此时a.js作为依赖被加载，但是没有被执行（官方文档说的only loads the modules）
    2、a.js和b.js会被打包成一个文件。
    3、回调函数里只require了b.js，只有b.js的内容会被执行。
    4、如果你需要使用a.js的内容，需要再加上require('./a.js')
    
    require.ensure(['./list'], function(require){
        var list = require('./list');
        list.show();
    });
    给require.ensure的第一个参数传了['./list']，执行到这里的时候list.js会被浏览器下载下来，但是并不会执行list.js模块中的代码，也就是webpack官网说的，不会进行evaluate。真正进行evaluate的时候是到了后面这句var list = require('./list');这就是所谓的懒执行。
    写在函数中的多个模块会被打包在一起，这一点和上面没有区别。另外，写在数组中的模块也会跟他们打包在一起，不管你有没有手动执行。
    复制代码

*  vue中使用

comst List = resolve => {
        require.ensure([],() => {
            resolve(require('./list'))
        },'list')
    }
    其实resolve的作用就是Promise里面那个resolve，在这里就是定义一个异步的组件
    复制代码

## 使用动态 import语法 ##

const Foo = () => import(/* webpackChunkName: "foo" */ './Foo.vue');
    const router = new VueRouter({
      routes: [
        { path: '/foo', component: Foo }
      ]
    })
    // /* webpackChunkName: "foo" */使用命名chunk，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)
    // webpack要加配置 output需要加个chunkFilename
    chunkFilename: '[name].js'
    复制代码

转载于:https://juejin.im/post/5c88ad216fb9a049a62d7149