vue项目优化之按需加载组件-使用webpack require.ensure

时间：2021-10-06 19:24:58

 

require-ensure和require-amd的区别：

  • require-amd
    • 说明: 同AMD规范的require函数，使用时传递一个模块数组和回调函数，模块都被下载下来且都被执行后才执行回调函数
    • 语法: require(dependencies: String[], [callback: function(...)])
    • 参数
      • dependencies: 模块依赖数组
      • callback: 回调函数
  • require-ensure
    • 说明: require.ensure在需要的时候才下载依赖的模块，当参数指定的模块都下载下来了（下载下来的模块还没执行），便执行参数指定的回调函数。require.ensure会创建一个chunk，且可以指定该chunk的名称，如果这个chunk名已经存在了，则将本次依赖的模块合并到已经存在的chunk中，最后这个chunk在webpack构建的时候会单独生成一个文件。
    • 语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])
      • dependencies: 依赖的模块数组
      • callback: 回调函数，该函数调用时会传一个require参数
      • chunkName: 模块名，用于构建时生成文件时命名使用
    • 注意点：requi.ensure的模块只会被下载下来，不会被执行，只有在回调函数使用require(模块名)后，这个模块才会被执行。

示例

require-amd

源代码

  • webpack.config.amd.js

    var path = require("path"); module.exports = { entry: "./example.amd.js", output: { path: path.join(__dirname, "amd"), filename: "[name].bundle.js", chunkFilename: "[id].chunk.js" } };

  • example.amd.js

    require(["./module1"], function(module1) { console.log("aaa"); var module2 = require("./module2"); console.log("bbb"); });
    • 1

  • module1.js

    console.log("module1"); module.exports = 1;

  • module2.js

    console.log("module2"); module.exports = 2;

构建结果

命令行中运行webpack --config webpack.config.amd.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

运行结果

浏览器中运行amd/index.html，控制台输出：

module1
aaa
module2
bbb

require-ensure

源代码

  • webpack.config.ensure.js

    var path = require("path"); module.exports = { entry: "./example.ensure.js", output: { path: path.join(__dirname, "ensure"), filename: "[name].bundle.js", chunkFilename: "[name].chunk.js" } };

  • example.ensure.js

    require.ensure(["./module1"], function(require) { console.log("aaa"); var module2 = require("./module2"); console.log("bbb"); require("./module1"); }, 'test');
    • 1
    • 2

  • module1.js
    同上

  • module2.js
    同上

构建结果

命令行中运行webpack --config webpack.config.ensure.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

运行结果

浏览器中运行ensure/index.html，控制台输出：

aaa
module2
bbb
module1
  • 1

require-ensure-chunk

源代码

  • webpack.config.ensure.chunk.js

    var path = require("path"); module.exports = { entry: "./example.ensur.chunk.js", output: { path: path.join(__dirname, "ensure-chunk"), filename: "[name].bundle.js", chunkFilename: "[name].chunk.js" } };

  • example.ensur.chunk.js

    require.ensure(["./module1"], function(require) { console.log("aaa"); require("./module1"); console.log("bbb"); }, 'common'); require.ensure(["./module2"], function(require) { console.log("ccc"); require("./module2"); console.log("ddd"); }, 'common')8
    • 9
    • 10

  • module1.js
    同上

  • module2.js
    同上

构建结果

命令行中运行webpack --config webpack.config.ensure.js
- main.bundle.js
- example.amd.js
- 1.chunk.js
- module1.js
- module2.js

运行结果

浏览器中运行ensure/index.html，控制台输出：

aaa
module1
bbb
ccc
1module2 ddd

webpack-module-requir

使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体,

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

类似下面的路由代码 

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

  1. import Hello from '@/components/Hello'
  2. import Province from '@/components/Province'
  3. import Segment from '@/components/Segment'
  4. import User from '@/components/User'
  5. import Loading from '@/components/Loading'

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

vue项目优化之按需加载组件-使用webpack require.ensure

所以我们需要分模块打包,把我们想要组合在一起的组件打包到一个 chunk块中去

分模块打包需要下面这样使用 webpack的 require.ensure,并且在最后加入一个 chunk名,

相同 chunk名字的模块将会打包到一起

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

  1. const Province = r => require.ensure([], () => r(require('@/components/Province.vue')), 'chunkname1')
  2. const Segment = r => require.ensure([], () => r(require('@/components/Segment.vue')), 'chunkname1')
  3. const Loading = r => require.ensure([], () => r(require('@/components/Loading.vue')), 'chunkname3')
  4. const User = r => require.ensure([], () => r(require('@/components/User.vue')), 'chunkname3')

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

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

vue项目优化之按需加载组件-使用webpack require.ensure

参考vue-router官方文档: https://router.vuejs.org/zh-cn/advanced/lazy-loading.html


标签：

相关文章