在vue中使用import()来代替require.ensure()实现代码打包分离(提高首屏加载速度)

最新推荐文章于 2024-04-16 15:56:03 发布

置顶

A-飞龙在天

最新推荐文章于 2024-04-16 15:56:03 发布

阅读量428

点赞数

本文链接：https://blog.csdn.net/HuangZeJunXXX/article/details/100516957

版权

本文介绍了如何在 Vue 项目中使用 import() 替换 require.ensure() 实现代码打包分离，以提高首屏加载速度。require.ensure() 已经被 import() 取代，后者支持动态导入并能被 webpack 静态解析。通过命名 chunk，我们可以将路由组件打包在同个异步块中，减少浏览器加载负担。文中提供了 require.ensure() 和 import() 的使用示例。

摘要由CSDN通过智能技术生成

一、require.ensure() 方法来实现代码打包分离

require.ensure() 是 webpack 特有的，已经被 import() 取代。

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

给定 dependencies 参数，将其对应的文件拆分到一个单独的 bundle 中，此 bundle 会被异步加载。
当使用 CommonJS 模块语法时，这是动态加载依赖的唯一方法。
意味着，可以在模块执行时才运行代码，只有在满足某些条件时才加载依赖项。
这个特性依赖于内置的 Promise。如果想在低版本浏览器使用 require.ensure，
记得使用像 es6-promise 或者 promise-polyfill 这样 polyfill 库，来预先填充(shim) Promise 环境。
var a = require(‘normal-dep’);
if ( module.hot ) {
require.ensure([‘b’], function(require) {
var c = require(‘c’);
// Do something special…
});
}
按照上面指定的顺序，webpack 支持以下参数：

dependencies：字符串构成的数组，声明 callback 回调函数中所需的所有模块。
callback：只要加载好全部依赖，webpack 就会执行此函数。require 函数的实现，作为参