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

本文详细介绍了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"
  }
}

 

(5)运行测试

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

 

一开始只加载

 

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

 

三、总结                                                                                

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

转载于:https://www.cnblogs.com/xxm980617/p/10668649.html

<think>我们正在处理一个Vue应用中的TypeError错误,具体错误信息是:"UncaughtTypeError:default.useisnotafunction"。从错误信息来看,问题发生在调用`default.use`时,说明`default`对象上并没有`use`方法。结合引用内容,我们知道Vue应用中这类错误通常与Vue库的导入或使用方式有关。参考提供的三个引用:-引用[1]:错误是`Vue.componentisnotafunction`,通常是因为Vue库未正确加载。-引用[2]:错误是`vue__WEBPACK_IMPORTED_MODULE_20__.reactiveisnotafunction`,可能与Vue版本或构建配置有关。-引用[3]:错误是`Cannotreadpropertiesofundefined(reading'install')`,发生在`Vue.use()`时,说明Vue对象可能未正确导入。当前错误信息与引用[3]最为相似,都是在使用`Vue.use()`(或类似方法)时遇到了问题。在引用[3]中,错误的原因是`Vue`对象是`undefined`,因此无法读取其上的`install`属性(`Vue.use`内部会调用插件的`install`方法)。同样,当前错误中的`default.use`,这里的`default`很可能应该是导入的Vue对象,但实际可能未正确导入。在ES6模块中,我们通常这样导入Vue:```javascriptimportVuefrom'vue';```这时,导入的`Vue`就是模块的默认导出(即`default`)。因此,当我们在代码中写`Vue.use()`时,实际上是在调用这个默认导出的对象上的`use`方法。然而,错误信息中说的是`default.use`,这可能是由于代码被转译后的结果,或者是因为在导入时使用了别名或其他方式导致了`default`属性的出现。常见的可能原因和解决方法:1.**Vue库未正确安装或导入**:-确保已经通过npm或yarn正确安装了Vue。检查`package.json`中是否有`vue`的依赖项,且版本正确。-检查导入语句是否正确。如果使用ES6模块,应该使用`importVuefrom'vue';`。如果是CommonJS,使用`constVue=require('vue');`。2.**Vue库的构建版本问题**:-在webpack等构建工具中,可能需要指定Vue的构建版本。Vue有不同的构建版本,如完整版(包含编译器)和运行时版本。错误可能与使用了错误的构建版本有关。-在webpack配置中,可以通过别名(alias)来指定使用哪个版本。例如,设置别名:```javascriptresolve:{alias:{'vue$':'vue/dist/vue.esm.js'//使用完整版,包含编译器}}```3.**导入语句被错误地转译**:-如果使用Babel等转译工具,并且配置了特殊的插件(如`add-module-exports`)或者使用了非标准的模块系统,可能导致导入的Vue对象结构发生变化。4.**在Vue实例化之前调用了Vue.use()**:-确保在使用`Vue.use()`安装插件之前,Vue已经被导入并初始化。5.**多个Vue实例**:-如果项目中存在多个Vue实例(比如不小心打包了两次Vue库),可能会导致奇怪的问题。检查webpack配置,确保Vue没有被重复打包。6.**版本不兼容**:-检查你使用的插件是否与当前Vue版本兼容。例如,有些插件可能只支持Vue2,而不支持Vue3。根据当前错误信息“default.useisnotafunction”,我们可以重点检查导入的Vue对象是否是预期的Vue构造函数。可以在调用`Vue.use()`之前,打印一下`Vue`对象,查看它到底是什么。例如,在代码中添加:```javascriptconsole.log(Vue);//或者console.log(Vue.default)看具体情况```如果打印出来的是`undefined`,那么说明导入失败;如果打印出来的是一个对象但不是期望的Vue构造函数,则可能是导入方式错误。另外,考虑到webpack构建,有时可能是由于循环依赖或模块加载顺序问题。可以尝试重新安装依赖(删除node_modules和package-lock.json,然后重新安装)。针对用户的具体问题,我们按照以下步骤解决:**步骤1:检查Vue的安装和导入**-确认项目目录下的`package.json`中确实有`vue`的依赖项,并且版本符合要求。-如果通过CDN引入,确保链接正确。**步骤2:检查导入语句**在入口文件(通常是`main.js`或`app.js`)中,确保导入Vue的语句正确:```javascriptimportVuefrom'vue';//正确//而不是import*asVuefrom'vue';//这样导入的是一个模块对象,use方法是Vue.default.use?但通常不这样用```如果使用`import*asVuefrom'vue'`,那么Vue对象上确实没有`use`方法,因为Vue的默认导出被包裹在一个模块对象中,这时你应该使用`Vue.default.use`,但这通常不是推荐的做法。所以应该改为默认导入。**步骤3:检查webpack配置**如果使用webpack,检查是否有配置别名指向正确的Vue构建版本(完整版或运行时版本)。如果没有配置,尝试添加:```javascript//webpack.config.jsmodule.exports={//...resolve:{alias:{'vue$':'vue/dist/vue.esm.js'}}};```**步骤4:检查插件安装顺序**确保在所有插件安装之前,Vue对象已经存在。例如:```javascriptimportVuefrom'vue';importVueRouterfrom'vue-router';Vue.use(VueRouter);//正确```**步骤5:检查Vue插件兼容性**如果错误发生在安装某个特定插件时,检查该插件是否支持当前使用的Vue版本。**步骤6:排除其他可能**-重新安装依赖:`rm-rfnode_modulespackage-lock.json&&npminstall`(在项目根目录下执行)。-清除构建缓存(如webpack的缓存目录),然后重新构建。如果以上步骤仍然无法解决,可能需要检查项目中是否有多个版本的Vue被引入(例如,某些依赖包中引入了Vue,导致冲突)。可以在webpack配置中使用`alias`将Vue指向唯一的版本:```javascriptresolve:{alias:{'vue$':path.resolve(__dirname,'node_modules/vue/dist/vue.esm.js')}}```由于错误信息较为模糊,具体原因可能需要根据项目实际情况排查。但以上步骤覆盖了大部分常见情况。§§相关问题§§1.如何正确导入Vue以避免类似错误?2.Vue2和Vue3在插件使用上有何区别?3.如何在webpack中配置Vue别名?4.如何检查项目中是否有多个版本的Vue?5.Vue.use()方法的作用和原理是什么?</think> ### Vue应用中`Uncaught TypeError: default.use is not a function`的解决方案 此错误通常发生在使用webpack构建的Vue项目中,核心问题是**Vue库未正确导入或初始化**。根据引用内容和典型案例分析,以下是主要原因和解决方案: --- #### 主要原因 1. **Vue未正确导入** 在入口文件(如`main.js`)中,`import Vue from 'vue'`语句未生效,导致`Vue`对象是`undefined`或非预期格式[^3]。 2. **Vue版本冲突** 项目依赖中可能存在多个Vue版本(如Vue 2和Vue 3混用),或与其他库(如Vuex、Vue Router)版本不兼容[^2]。 3. **webpack配置问题** 未正确配置模块解析规则(如未设置`resolve.alias`),或未启用`esModule`支持(默认应启用)[^2]。 4. **入口文件执行顺序错误** 在调用`Vue.use()`前,Vue插件(如Vue Router)尚未初始化,或插件导入顺序错误[^3]。 --- #### 分步解决方案 1. **检查Vue导入语句** 确保入口文件中使用标准ESM导入语法: ```javascript // 正确写法 import Vue from 'vue'; // 错误写法:解构或异步导入会导致default异常 import { createApp } from 'vue'; ``` 2. **验证Vue安装与版本** 执行命令检查依赖版本: ```bash npm ls vue vue-router vuex ``` - 若存在多版本冲突,在`package.json`中固定版本: ```json "dependencies": { "vue": "^2.6.14", "vue-router": "^3.5.1", "vuex": "^3.6.2" } ``` 3. **配置webpack别名** 在`webpack.config.js`中添加Vue的别名解析规则: ```javascript module.exports = { resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' // 明确指向ES模块版本 } } }; ``` 4. **修正插件初始化顺序** 确保先导入Vue,再加载插件: ```javascript // main.js import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App.vue'; Vue.use(VueRouter); // ✅ 在new Vue()前调用 new Vue({ router, render: h => h(App) }).$mount('#app'); ``` 5. **清理构建缓存** 删除以下目录后重新安装依赖: ```bash rm -rf node_modules/.cache # 清除webpack缓存 rm -rf dist # 删除旧构建产物 npm install # 重装依赖 ``` --- #### 预防措施 - 使用`Vue CLI`创建项目而非手动配置webpack - 所有插件调用`Vue.use()`的操作集中在入口文件顶部 - 定期更新依赖版本时,检查[Vue兼容性列表](https://github.com/vuejs/vue-next#compatibility-note)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值