vue项目按需引入的两种方式 import() 和 require.ensure() |
您所在的位置:网站首页 › vue中require的用法 › vue项目按需引入的两种方式 import() 和 require.ensure() |
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 |