webpack源码分析-编译的seal和emit阶段

webpack的编译分几个阶段进行,分别为创建对象阶段run、解析获取module阶段make、module分包阶段seal、输出打包后文件阶段emit

seal阶段

seal阶段主要对modules做分拣、拆包、封装。

查看文件/node_modules/webpack/lib/Compiler.js第675行:

1
2
3
4
5
6
7
8
9
10
compile(callback) {
// make 阶段开始
this.hooks.make.callAsync(compilation, err => {
if (err) return callback(err);
// make 阶段结束
compilation.finish(err => {
if (err) return callback(err);
// seal 阶段开始
compilation.seal(err => {
...
阅读更多...

webpack源码分析-编译的run和make阶段

webpack的编译分几个阶段进行,分别为创建对象阶段run、解析获取module阶段make、module分包阶段seal、输出打包后文件阶段emit

一些定义

  • module:webpack中用requireimport引入的都叫module

  • chunk:module的一个集合,入口文件就算一个chunk

  • dependency:包含一个模块的基本信息,用来创建module

  • moduleFactory:创建module对象的工厂类

  • assets:最后输出的资产文件

阅读更多...

webpack源码分析-初始化过程

webpack是现代JavaScript应用程序的静态模块打包器。通过递归地构建依赖关系图,将应用程序需要的每个模块打包成一个或多个bundle

基础用法

  1. 使用npm init命令初始化工程

  2. 在src目录创建入口文件index.js

1
2
import $ from 'jquery'; // 引入 jquery 第三方库
$('#app').text('hello webpack!'); // 使用 jquery 输出 hello webpack
阅读更多...

Vue动态切换页签缓存页面内容

之前在上家公司自己建系统的时候出现过切换页签,但切换后上个页面的内容没有被缓存,而是重新渲染了。

正好学习Vue3时看到了解决方法。

(之前因为赶工作进度,学习Vue2时没有用心看<–要改正的问题

使用<keep-alive></keep-alive>将切换的组件包裹起来即可

1
2
3
<keep-alive>
<component :is="currentTabComponent"></component>
</keep-alive>

Vue组件通信

Vue组件实例的作用域相互独立,不同组件之间的数据无法相互引用

props

参数props用于父组件向子组件传递数据

父组件调用子组件,在子组件的props写入需要的属性。传递时,在父组件内调用的子组件中直接使用。

可以传入静态的值:

阅读更多...

Vue事件处理修饰符

事件修饰符

在事件处理程序中调用event.preventDefault()event.stopPropagation()是非常常见的需求。因此推荐使用事件修饰符处理。尽管可以在方法中实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理DOM事件细节。

修饰符是由点开头的指令后缀来表示的。使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。

阅读更多...

Vue条件渲染区分

  1. v-if在初始渲染时判断条件,若为假,则不进行渲染。只有当条件为真时才开始渲染条件块。确保在切换过程中条件块内的事件监听器和子组件被适当的销毁和重建。
  2. v-show无论初始判断条件是真或假,均会进行渲染。即只是切换元素的CSS Property display
  3. v-show不支持<template>v-else

使用v-if有更高的切换开销,若运行时条件很少改变,则选择v-ifv-show有更高的初始开销,若需要频繁的切换,则使用v-show更好。

阅读更多...
  • © 2020-2021 Aweso Lynn
  • PV: UV: