按需加载指定文件名（require.ensure、import(

上篇帖子说到Vue中的异步路由、异步组件、懒加载第三方类库，但是怎么给异步加载的文件指定文件名呢？接下来将为你解答

一、require.ensure

用法：

require.ensure(
  dependencies: String[],
  callback: function(require),
  errorCallback: function(error),
  chunkName: String
)

当使用 CommonJS 模块语法时，这是动态加载依赖的唯一方法。

例子1：

    // 按需异步加载image-viewer-gallery和它依赖的css
    // 打包到lib/image-viewer-gallery.js
    require.ensure(['./css/footer.styl'], () => {
            const ImageViewer = require('image-viewer-gallery');
            // 其他代码 ......
    }, 'lib/image-viewer-gallery');

例子2：

       // Vue按需加载组件
       // 打包到main/select.js
       components: {
            select: r => require.ensure([], () => r(require('@/components/select')), 'main/select'),
        },

二、import()

用法：

import(
  /* webpackInclude: /\.json$/ */
  /* webpackExclude: /\.noimport\.json$/ */
  /* webpackChunkName: "my-chunk-name" */
  /* webpackMode: "lazy" */
  /* webpackPrefetch: true */
  /* webpackPreload: true */
  /* webpackIgnore: true */
  `./locale/${language}`
);

• webpackChunkName：新 chunk 的名称，添加这一行注释会把 chunk 的名称从[id].js替换为[my-chunk-name].js

例子1：

       // Vue按需加载组件
       // 打包到main/select.js
       components: {
            select: () => import(/* webpackChunkName: "main/select" */ '@/components/select'),
        },