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

最新推荐文章于 2023-03-29 09:26:57 发布

转载最新推荐文章于 2023-03-29 09:26:57 发布 · 374 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xxm980617/p/10668649.html

文章标签：

#webpack #javascript #json #ViewUI

本文详细介绍了Webpack如何实现异步加载及代码分割，通过具体示例展示了如何利用`webpack.ensure`来按需加载模块，从而优化应用的启动时间和资源占用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、前言

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"
  }
}