Vue(基础七）_webpack(webpack异步加载原理)

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

一、前言

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

三、总结

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

虽然现在走得很慢，但不会一直这么慢