Vue의 주문형 로딩 구성 요소 webpack require.ensure에 대한 자세한 설명-JS 튜토리얼-php.cn

Vue의 주문형 로딩 구성 요소 webpack require.ensure에 대한 자세한 설명

小云云

풀어 주다： 2017-12-14 10:54:01

원래의

2460명이 탐색했습니다.

vue-cli是由vue官方发布的快速构建vue单页面的脚手架。使用 vue-cli构建的项目,在默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,本文主要介绍了vue按需加载组件webpack require.ensure的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

打包位置是 dist/static/js/app.[contenthash].js

类似下面的路由代码

router/index.js 路由相关信息,该路由文件引入了多个 .vue组件

import Hello from &#39;@/components/Hello&#39;
import Province from &#39;@/components/Province&#39;
import Segment from &#39;@/components/Segment&#39;
import User from &#39;@/components/User&#39;
import Loading from &#39;@/components/Loading&#39;

로그인 후 복사

执行 npm run build 会打包为一个整体 app.[contenthash].js ,这个文件是非常大,可能几兆或者几十兆,加载会很慢

Vue의 주문형 로딩 구성 요소 webpack require.ensure에 대한 자세한 설명

所以我们需要分模块打包,把我们想要组合在一起的组件打包到一个 chunk块中去,分模块打包需要下面这样使用 webpack的 require.ensure,并且在最后加入一个 chunk名,相同 chunk名字的模块将会打包到一起。

webpack中利用require.ensure()实现按需加载

1、require.ensure()

webpack 在编译时，会静态地解析代码中的 require.ensure()，同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。

语法如下：

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

로그인 후 복사

依赖 dependencies

这是一个字符串数组，通过这个参数，在所有的回调函数的代码被执行前，我们可以将所有需要用到的模块进行声明。

回调 callback

当所有的依赖都加载完成后，webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。因此，我们可以进一步 require() 依赖和其它模块提供下一步的执行。

chunk名称 chunkName

chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称，我们可以保证所有的依赖都会一起放进相同的文件束(bundle)。

让我们来看以下的项目

\\ file structure
  |
  js --|
  |  |-- entry.js
  |  |-- a.js
  |  |-- b.js
  webpack.config.js
  |
  dist

로그인 후 복사

\\ entry.js
require(&#39;a&#39;);
require.ensure([], function(require){
  require(&#39;b&#39;);
});

로그인 후 복사

\\ a.js
console.log(&#39;***** I AM a *****&#39;);

로그인 후 복사

\\ b.js
console.log(&#39;***** I AM b *****&#39;);

로그인 후 복사

\\ webpack.config.js
var path = require(&#39;path&#39;);
module.exports = function(env) {
  return {
    entry: &#39;./js/entry.js&#39;,
    output: {
      filename: &#39;bundle.js&#39;,
      path: path.resolve(__dirname, &#39;dist&#39;)
    }
  }
}

로그인 후 복사

通过执行这个项目的 webpack 构建，我们发现 webpack 创建了2个新的文件束， bundle.js 和 0.bundle.js。

entry.js 和 a.js 被打包进 bundle.js.

b.js 被打包进 0.bundle.js.

2、require.ensure() 的坑点

（1）、空数组作为参数

require.ensure([], function(require){
  require(&#39;./a.js&#39;);
});

로그인 후 복사

以上代码保证了拆分点被创建，而且 a.js 被 webpack 分开打包。

（2）、依赖作为参数

require.ensure([&#39;./a.js&#39;], function(require) {
  require(&#39;./b.js&#39;);
});

로그인 후 복사

上面代码， a.js 和 b.js 都被打包到一起，而且从主文件束中拆分出来。但只有 b.js 的内容被执行。a.js 的内容仅仅是可被使用，但并没有被输出。

想去执行 a.js，我们需要异步地引用它，如 require(‘./a.js')，让它的 JavaScritp 被执行。

（3）、单独打包成自己写的名字配置

需要配置chunkFilename,和publicPath。publicPath是按需加载单独打包出来的chunk是以publicPath会基准来存放的，chunkFilename:[name].js这样才会最终生成正确的路径和名字

module.exports={
  entry:&#39;./js/entry.js&#39;,
  output:{
    path:path.resolve(__dirname,"./dist"),
    filename:&#39;js/a.bundle.js&#39;,
    publicPath:"./",
    chunkFilename:&#39;js/[name].js&#39;
  }

로그인 후 복사

所以router/index.js 修改为懒加载组件：

const Province = r => require.ensure([], () => r(require(&#39;@/components/Province.vue&#39;)), &#39;chunkname1&#39;)
const Segment = r => require.ensure([], () => r(require(&#39;@/components/Segment.vue&#39;)), &#39;chunkname2&#39;)
const Loading = r => require.ensure([], () => r(require(&#39;@/components/Loading.vue&#39;)), &#39;chunkname3&#39;)
const User = r => require.ensure([], () => r(require(&#39;@/components/User.vue&#39;)), &#39;chunkname3&#39;)

로그인 후 복사

根据 chunkame的不同, 上面的四个组件, 将会被分成3个块打包,最终打包之后与组件相关的js文件会分为3个 (除了app.js,manifest.js, vendor.js)

分模块打包之后在 dist目录下是这样的, 这样就把一个大的 js文件分为一个个小的js文件了,按需去下载,其他的使用方法和import的效果一样

Vue의 주문형 로딩 구성 요소 webpack require.ensure에 대한 자세한 설명