vue项目按需引入的两种方式 import() 和 require.ensure()

您所在的位置:网站首页 vue中require的用法 vue项目按需引入的两种方式 import() 和 require.ensure()

vue项目按需引入的两种方式 import() 和 require.ensure()

2024-01-10 22:28| 来源: 网络整理| 查看: 265

require.ensure() 主要用于实现代码打包分离文件,require.ensure() 是 webpack 特有的

语法

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

在使用 CommonJS 模块语法时,这是动态加载依赖的唯一方法。然而现在基本被 import()代替了,都可以按需加载依赖项

dependencies:字符串构成的数组,会将其对应的文件拆分到一个单独的 bundle 中,此 bundle 会被异步加载 callback:webpack 会执行此函数,使用 require() 来加载依赖,函数体可以使用此参数,来进一步执行 require() 模块 errorCallback:当 webpack 加载依赖失败时,会执行此函数 chunkName:由 require.ensure() 创建出的 chunk 的名字,打包后会将其存放到此路径下

// 按需异步加载bar.js和它依赖的css // 打包到bar文件中 require.ensure(['./css'], () => { const f = require('./../bar.js'); }, 'bar'); r => require.ensure([], () => r(require('@/components/select')), 'main/select')

import() 如果我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中,只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3