欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解webpack分包及异步加载套路

程序员文章站 2022-06-03 13:59:20
最近一个小项目是用webpack来进行构建的。其中用到了webpack分包异步加载的功能。今天抽时间看了下webpack打包后的文件,大致弄明白了webpack分包及异步加...

最近一个小项目是用webpack来进行构建的。其中用到了webpack分包异步加载的功能。今天抽时间看了下webpack打包后的文件,大致弄明白了webpack分包及异步加载的套路。

由于这个小项目是用自己写的一个路由,路由定义好了不同路径对应下的模板及逻辑代码:

webpack配置文件:

 var path = require('path'),
 dashboardplugin = require('webpack-dashboard/plugin'),
 htmlwebpackplugin = require('html-webpack-plugin'),
 webpack = require('webpack'),
 extracttextplugin = require('extract-text-webpack-plugin');

var paths = {
 app: path.join(__dirname, 'src'),
 dist: path.join(__dirname, 'dist')
}

var pkg = require('./package.json');
var target = process.env.npm_lifecycle_event; //获取当前正在运行的脚本名称

var isproduction = function() {
 return process.env.node_env === 'production';
}



module.exports ={
 entry: {
 'index': path.join(__dirname, 'src/index.js'),
 'lib': ['./src/lib/js/index.js'],
 },
 //filename是主入口文件的名称,即对应的entry
 //chunkfilename对应的是非主入口文件的名称,chunk
 output: {
 path: paths.dist,
 publicpath: '/static/taxi-driver/', //publicpath 的话是打包的时候生成的文件链接,如果是在生产环境当然是用服务器地址,如果是开发环境就是用本地静态服务器的地址
 filename: 'js/register/[name].js',
 chunkfilename: 'js/register/[name].js',
 //todo: build文件中加入hash值
 },
 //生成source-map文件
 devtool: isproduction ? null : 'source-map',
 devserver: {
 proxy: {
  '/api/*': {
  target: 'http://localhost:3000',
  secure: false
  }
 }
 },
 module: {
 loaders: [
  {
  test: /\.js$/,
  exclude: /node_modules|picker.min.js/,
  loader: 'babel'
  },
  {
  test: /\.less$/,
  loader: extracttextplugin.extract('style', 'css!less')
  },
  {
  test: /\.html$/,
  loader: 'raw'
  },
  {
  test: /\.css$/,
  loader: extracttextplugin.extract('style', 'css')
  },
  {
  test: /\.json$/,
  loader: 'json'
  }
 ]
 },
 resolve: {
 alias: {
  src: path.join(__dirname, 'src'),
  modules: path.join(__dirname, 'src/modules'),
  lesslib: path.join(__dirname, 'src/lib/less'), 
  jslib: path.join(__dirname, 'src/lib/js'),
  components: path.join(__dirname, 'src/components')
 },
 extensions: ['', '.js', '.less', '.html', '.json'],
 },
 plugins: [
 new htmlwebpackplugin({
  title: '认证资料',
  template: './dist/assets/info.html',
  inject: 'body',
  filename: 'pages/register/index.html' //输出html文件的位置
 }),
 new dashboardplugin(),
 new extracttextplugin('css/register/style.css'), //将引入的样式文件单独抽成style.css文件并插入到head标签当中,带有路径时,最后打包
 new webpack.optimize.commonschunkplugin({
  name: 'common',
  filename: 'js/register/common.js',
  minchunks: 3
 })
 ]
}

接下来是定义好的路由文件:

 const router = new route();
 
 route
 .addroute({
  path: 'path1',
  viewbox: '.public-container',
  template: require('modules/path1/index.html'),
  pageinit() {
  //webpack提供的分包的api. require.ensure
  require.ensure([], () => {
   let controller = require('modules/path1/controller');
   router.registerctrl('path1', new controller('.public-container'));
  }, 'path1');
  }
 })
 .addroute({
  path: 'path2',
  viewbox: '.public-container',
  template: require('modules/path2/index.html'),
  pageinit() {
  require.ensure([], () => {
   let controller = require('modules/path2/controller');
   router.registerctrl('path2', new controller('.public-container'));
  }, 'path2');
  }
 });

最后webpack会将这2个需要异步加载的模块,分别打包成path1.js和path2.js.

当页面的路径为:

http://localhost:8080/pages/register/#/path1时,会加载path1.js文件
http://localhost:8080/pages/register/#/path2时,会加载path2.js文件.

再来看看webpack打包后的文件:

其中在common.js中, webpack定义了一个全局函数webpackjsonp.这个全局函数在项目一启动后就定义好。
局部函数__webpack_require__用以在某一个模块中初始化或者调用其他的模块方法。同时这个函数还有一个静态方法__webpack_require__.e这个方法就是用来异步加载js文件的。

接下来一步一步的看:

 //common.js
 (function(modules) {
 //modules用来保存所有的分包,它是一个数组,数组每个元素对应的都是callback,每个分包都是通过数字来进行标识的
 
 //定义好的全局函数webpackjsonp
 //大家可以看看其他打包好的文件,例如index.js, path1.js和path2.js文件.都是webpackjsonp()这种的形式,大家用过jsonp应该会很好理解。首先在前端定义好函数,然后后端下发组装好的函数js文件,前端获取到这个文件后就可以立即进行执行了
 var parentjsonpfunction = window["webpackjsonp"];
 window["webpackjsonp"] = function webpackjsonpcallback(chunkids, moremodules) {
  var moduleid, chunkid, i = 0, callbacks = [];
 for(;i < chunkids.length; i++) {
  chunkid = chunkids[i];
  if(installedchunks[chunkid])
  callbacks.push.apply(callbacks, installedchunks[chunkid]);
  installedchunks[chunkid] = 0;
 }
  //这个全局函数会将各个分包缓存到modules
 for(moduleid in moremodules) {
  modules[moduleid] = moremodules[moduleid];
 }
 if(parentjsonpfunction) parentjsonpfunction(chunkids, moremodules);
 while(callbacks.length)
  callbacks.shift().call(null, __webpack_require__);
  //用以启动整个应用
 if(moremodules[0]) {
  installedmodules[0] = 0;
  return __webpack_require__(0);
 }
 };
 })([]);

 // the require function
  //通过数字标识的moduleid
 function __webpack_require__(moduleid) {

 // check if module is in cache
 if(installedmodules[moduleid])
  return installedmodules[moduleid].exports;

 // create a new module (and put it into the cache)
 var module = installedmodules[moduleid] = {
  exports: {},
  id: moduleid,
  loaded: false
 };

 // execute the module function
 modules[moduleid].call(module.exports, module, module.exports, __webpack_require__);

 // flag the module as loaded
 module.loaded = true;

 // return the exports of the module
 return module.exports;
 }

 // this file contains only the entry chunk.
 // the chunk loading function for additional chunks
  //异步加载函数
 __webpack_require__.e = function requireensure(chunkid, callback) {
 // "0" is the signal for "already loaded"
 if(installedchunks[chunkid] === 0)
  return callback.call(null, __webpack_require__);

 // an array means "currently loading".
 if(installedchunks[chunkid] !== undefined) {
  installedchunks[chunkid].push(callback);
 } else {
   //创建script表情,请求js文件
  // start chunk loading
  installedchunks[chunkid] = [callback];
  var head = document.getelementsbytagname('head')[0];
  var script = document.createelement('script');
  script.type = 'text/javascript';
  script.charset = 'utf-8';
  script.async = true;

  script.src = __webpack_require__.p + "js/register/" + ({"0":"index","1":"path1","2":"path2"}[chunkid]||chunkid) + ".js";
  head.appendchild(script);
 }
 };

 // expose the modules object (__webpack_modules__)
 __webpack_require__.m = modules;

 // expose the module cache
 __webpack_require__.c = installedmodules;

 // __webpack_public_path__
  //配置文件中定义的publicpath,build完后加载文件的路径
 __webpack_require__.p = "/static/taxi-driver/";
})

在最后输出的index.html文件中首先加载的是这个common.js文件,然后是入口文件index.js。因为这个实例代码里面没有很多共用文件,因此webpack自己提供的commonchunkplugin这个插件并没有起到作用,本来作为共用文件的xroute.js因此也被打包进入了index.js.

 webpackjsonp([0, 3], [
 /* 0 */
/***/ function(module, exports, __webpack_require__) {

 'use strict';

 __webpack_require__(1);

 __webpack_require__(8);

/***/ },
/* 1 */
/* 2 */
/* 3 */
//....
/* 8 */
 ])

index.js文件在common.js后加载,加载完后即开始执行.大家还记得webpackjsonp这个全局函数里面的倒数3行代码吧。就是用以调用这里:

 /* 0 */
 function(module, exports, __webpack_require__) {

 'use strict';

 __webpack_require__(1);

 __webpack_require__(8);

}

其中模块id为1和8的内容请查看相应文件, 其中模块1为我定义的路由文件,在执行模块1的代码前,会加载模块2的内容,模块2的内容为我定义的路由库。

接下来就看下模块1中路由定义的具体内容:

 /* 1 */
/***/ function(module, exports, __webpack_require__) {

 'use strict';

 object.defineproperty(exports, "__esmodule", {
 value: true
 });
 
 //加载路由库
 var _index = __webpack_require__(2);
 //实例化一个路由
 var router = new _index.route();
 //定义好的路由规则
 router.home('path1').addroute({
 path: 'path1',
 viewbox: '.public-container',
 //模板文件,为模块4
 template: __webpack_require__(4),
 pageinit: function pageinit() {
 //这个方法是在common.js中__webpack_require__的静态方法,用来异步加载js。
 //异步加载js的文件(即chunk)用来数字来标识,chunk的顺序从0开始.
 //这里path1.js的chunk num为1,大家可以回过头到common.js的__webpack_require__.e方法里面看看,里面已经做好了chunk num和模块文件的映射, chunk 1对应的模块文件为path1.js,chunk 2对用的模块文件为path2.js
 //__webpack_require__.e()接收的第二个参数为异步加载模块后的回调. 当path1.js被加载完后,在modules里面进行了缓存.这时就可以通过模块id去获取这个模块。然后进行初始化等后续的操作
  __webpack_require__.e/* nsure */(1, function () {
  var controller = __webpack_require__(6);
  router.registerctrl('path1', new controller('.public-container'));
  });
 }
 }).addroute({
 path: 'path2',
 viewbox: '.public-container',
 //模板文件,为模块5
 template: __webpack_require__(5),
 pageinit: function pageinit() {
  __webpack_require__.e/* nsure */(2, function () {
  var controller = __webpack_require__(7);
  router.registerctrl('path2', new controller('.public-container'));
  });
 }
 });

 router.bootstrap();

 exports.default = router;

/***/ },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。