---恢复内容开始---

一、前言

1、webpack异步加载原理’

                                          2、webpack.ensure原理

                                          3、例子

二、主要内容

1、webpack异步加载原理’

webpack ensure有人称他为异步加载，也有人称为代码切割，他其实就是将js模块给独立导出一个.js文件，然后使用这个模块的时候，webpack会构造script dom元素，由浏览器异步请求这个js文件

2、webpack.ensure原理

就是把一些js模块给独立出一个个js文件，然后需要用到的时候，再创建一个script对象，加入到document.head对象中就可，浏览器会自动帮我们发起请求，去请求这个js文件，然后写个回调函数，让请求到的js文件做一些业务操作

3、例子

假设：main.js依赖三个js文件：

A.js是点击aBtn按钮后，才执行的逻辑

B.js是点击bBtn按钮后，才执行的逻辑

vue.js是封装main.js时需要用到的包

（1）新建项目目录如下：

（2）main.js如下，main.js依赖vue.js和两个异步加载的A.js 和B.js

import Vue from 'vue'

console.log(Vue)

document.getElementById('aBtn').onclick=function(){

    //异步加载A

    require.ensure([], function(){//当A.js需要依赖于B.js的时候，需要在[]中加入

        var A = require('./A.js');

        alert(A.data)

    })

}

document.getElementById('bBtn').onclick=function(){

    //异步加载b

    require.ensure([], function(){

        var B = require('./B.js');

        alert(B.data)

    })

}

（3）

A.js

var A = {

    "data":"hello A"

}

module.exports = A;

B.js

var B = {

    "data":"hello B"

}

module.exports = B;

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <div id='app'></div>

    <button id='aBtn'>aBtn</button>

    <button id='bBtn'>bBtn</button>

</body>

</html>

（4）config文件配置

下面inject:是将打包编译的.js文件注入到你的index.html文件中，他有四个值：true(注入在body内底部) body(注入在body标签下面，head 注入在head标签下面

var path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin')

const webpack = require('webpack');

const packagejson = require('./package.json')

module.exports = {

    //入口

    entry:{

        "main":"./src/main.js",

        "util":Object.keys(packagejson.dependencies)//获取生产环境依赖库，抽离vue模块

    },

    output:{

        path:path.resolve('./dist'),

        filename:'[name].js'

    },

    watch:true,

    plugins:[

        new webpack.optimize.CommonsChunkPlugin({

            name:'common',//这里任意取名,第二个输出的是webpack运行时文件

            filename:'[name].js'

        }),

        new HtmlWebpackPlugin({

            chunks:['common','util','main'], //chunk主要用于多入口文件，会编译生成多个打包文件，common一定前面，

            template:"./src/index.html",

            inject:true  //inject是向index.html注入的位置，head body

        })

    ]

}

package.json

{

  "name": "chunk",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "dev": "webpack --config ./webpack.dev.config.js",

    "prod": "webpack --config ./webpack.prod.config.js"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "html-webpack-plugin": "^3.2.0",

    "webpack": "^2.6.1"

  },

  "dependencies": {

    "vue": "^2.6.10"

  }

}

（5）运行测试

运行之后发现多出一个dist文件夹，里面是打包后的文件，

一开始只加载

当点击按钮，才开始加载a.js和b.js

三、总结

---恢复内容结束---

Vue(基础七）_webpack(webpack异步加载原理)的更多相关文章

  1. Vue.js 子组件的异步加载及其生命周期控制

    前端开发社区的繁荣,造就了很多优秀的基于 MVVM 设计模式的框架,而组件化开发思想也越来越深入人心.这其中不得不提到 Vue.js 这个专注于 VM 层的框架. 本文主要对 Vue.js 组件化开发 ...

  2. webpack异步加载业务模块

    虽然把我们用到的JS文件全部打包一个可以节省请求数,但如果打包后的JS文件过大,那么也容易出现白屏现象,许多操作失灵.而且一些区域是点到才出现,那么相关的JS其实可以剥离出这个大JS文件外.这就涉及到 ...

  3. Vue(基础七)_webpack打包工具用法（上）

    一.前言 1.webpack原理 二.主要内容 1.webpack原理: (1)官网图:我们的项目有多个js, css文件的时候还需要考虑先引入哪一个后引入哪一个,因为这些js文件是相互依赖的,web ...

  4. require.ensure的用法;异步加载-代码分割;

    webpack异步加载的原理 webpack ensure相信大家都听过.有人称它为异步加载,也有人说做代码切割,那这 个家伙到底是用来干嘛的?其实说白了,它就是把js模块给独立导出一个.js文件的, ...

  5. React配合Webpack实现代码分割与异步加载

    这是Webpack+React系列配置过程记录的第四篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  6. vue路由的异步加载(懒加载)方法

    vue路由的异步加载(懒加载)方法. javascriptvue.jsvue-router  阅读约 2 分钟 vue本身不多介绍.直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果 ...

  7. vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)

    第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...

  8. Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果

    你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...

  9. Vue 组件异步加载(懒加载)

    一.vue的编译模式 (1)路由配置信息 //eg1: const MSite = resolve => require.ensure([], () =>resolve(require([ ...

随机推荐

  1. 今天开始学习模式识别与机器学习Pattern Recognition and Machine Learning (PRML)，章节5.1，Neural Networks神经网络-前向网络。

    话说上一次写这个笔记是13年的事情了···那时候忙着实习,找工作,毕业什么的就没写下去了,现在工作了有半年时间也算稳定了,我会继续把这个笔记写完.其实很多章节都看了,不过还没写出来,先从第5章开始吧, ...

  2. SpringMVC 重定向到其他系统的页面的两种方式

    //测试重定向到另外的一个系统 @RequestMapping("/tttt") public void testRed(HttpServletResponse response) ...

  3. hdu-2328（暴力枚举+kmp）

    题意:给你n个字符串,问你这n个串的最长公共子串 解题思路:暴力枚举任意一个字符串的所有子串,然后暴力匹配,和hdu1238差不多的思路吧,这里用string解决的: 代码: #include< ...

  4. Mysql 查看连接数,状态 最大并发数(赞)

    Mysql 查看连接数,状态 最大并发数(赞)   -- show variables like '%max_connections%'; 查看最大连接数 set global max_connect ...

  5. BZOJ4003[JLOI2015]城池攻占——可并堆

    题目描述 小铭铭最近获得了一副新的桌游,游戏中需要用 m 个骑士攻占 n 个城池. 这 n 个城池用 1 到 n 的整数表示.除 1 号城池外,城池 i 会受到另一座城池 fi 的管辖, 其中 fi ...

  6. BZOJ5419[Noi2018]情报中心——线段树合并+虚树+树形DP

    题目链接: [NOI2018]情报中心 题目大意:给出一棵n个节点的树,边有非负边权,并给出m条链,对于每条链有一个代价,要求选出两条有公共边的链使两条链的并的边权和-两条链的代价和最大. 花了一天的 ...

  7. Git——Git的简单介绍【一】

    官方网站 Git官网 https://git-scm.com/ GitHub https://github.com GitLab https://about.gitlab.com/ SVN https ...

  8. Gym100496H-House of Representatives-树

    树上每个元素有一个p,元素之间有距离d,计算一个元素u,使得sigma(d(i,u)*pi)最小. 两次dfs,第一次计算本节点以下的sigma(),第二次利用sump求解出ans. #include ...

  9. django 配置邮件发送 send_email

    导入 send_email 所用方法导入 from django.core.mail import send_mail 因为使用的需要指明 发送人 所以要把 setting.py 中的 EMAIL_F ...

  10. Codeforces Bubble Cup 11 J. Moonwalk challenge加强版

    题意 有一棵 \(n\) 个节点的树,每条边上有一个字符,有 \(m\) 次询问. 每次会选定两个点 \(u, v\) , \(u\) 到 \(v\) 的路径上的字符形成了一个字符串 \(T\) ,再 ...