关于前端:一文讲清楚webpack和vite原理

一、前言

每次用vite创立我的项目秒建好，用vue-cli创立了一个我的项目，却有点久，那为什么用 vite 比 webpack 要快呢，这篇文章带你梳理分明它们的原理及不同之处！文章有一点长，看完相对有播种！

webpack根本应用webpack打包原理vite工作原理小结

二、webpack根本应用

webpack 的呈现次要是解决浏览器里的 javascript 没有一个很好的形式去引入其它的文件这个问题的。话说必定有小伙伴不记得 webpack 打包是咋应用的（分明的话能够跳过这一大节），那么我以一个小 demo 来实现一下：

咱们在vue我的项目中初始化后全局装置 webpack 和 webpack-cli ：

yarn add webpack webpack-cli -g

创立vue所需的目录文件，以及webpack配置文件。

目录构造如下：

编辑

webpack.config.js配置文件编写

不分明webpack配置项的敌人能够进官网文档瞅一眼：webpack 中文文档

看完之后，咱们晓得webpack次要蕴含的几个概念就开始编写配置文件了！

（1）打包main.js

代码如下：

const path = require('path')

module.exports = {
  mode: 'development',  //设置开发模式
  entry: path.resolve(__dirname, './src/main.js'),   //打包入口
  output: {   //打包到哪里去
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js',  //默认文件名main.js
  }
}

为了不便咱们运行，咱们去package.json中配置命令，只需yarn dev就能运行了：

"dev": "webpack server --progress --config ./webpack.config.js"

运行后咱们发现根目录多出了一个dist文件夹，咱们进到main.js中查看发现打包胜利了！

（2）打包index.html

问题❓：咱们晓得vue我的项目中是有一个index.html文件的，咱们如果要打包这个html文件咋办呢？
咱们就须要借助plugin插件去扩大webpack的能力，去装它：

yarn add html-webpack-plugin -D

引入并应用它：

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

  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'index.html'),    //须要被打包的html
      filename: 'index.html',  //文件打包名
      title: '手动搭建vue' //html传进去的变量
    }),
  ]

index.html 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= htmlWebpackPlugin.options.title%></title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

好啦，咱们再次运行打包命令，发现dist目录下多出index.html文件，打包胜利！

（3）打包vue文件

首先，咱们须要去装置vue的源码:

yarn add vue

新建一个App.vue：

<template>
  <div>
    vue我的项目测试
  </div>
</template>

main.js中写入：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

咱们再去打包，发现报错了，依据提醒，咱们能够推断webpack是不能解决且不能编译.vue后缀的文件的，这就须要引入loader及vue编译插件了！装它！

yarn add vue-loader@next
yarn add vue-template-compiler -D

持续在配置文件中引入并应用：

const { VueLoaderPlugin } = require('vue-loader')

  module: {
    rules: [
      {
        test: /.vue$/,  //.vue后缀的文件
        use: ['vue-loader']  //启用vue-loader
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]

再次打包，打包胜利！咱们能够测试一下，用live server运行打包后的index.html看看，会发现写在vue中的文字在页面胜利展现！

编辑

（4）打包css

那么咱们如果要在vue中写css款式呢？显然webpack是辨认不了的，还得loader来帮忙：

yarn add css-loader style-loader -D

配置文件中退出新的一条css规定:

module: {
    rules: [
      {
        test: /.css$/,  //.css后缀的文件
        use: ['style-loader', 'css-loader']
      }
    ]
  }

去vue文件中把字体款式改为红色后，打包并测试一下，胜利！：

编辑

（5）配置babel

为了避免 webpack 辨认不了高版本的 js 代码，咱们去装 babel ：

yarn add @babel/core @babel/cdpreset-env babel-loader -D

webpack.config.js 配置文件增加新的一条 js 规定：

module: {
    rules: [
      {
        test: /.js$/,  //.js后缀的文件
        exclude: /node_modules/, //不蕴含node_modules
        use: ['babel-loader']
      }
    ]
  }

babel.config.js 配置文件代码如下：

module.exports={
  presets:[
    ['@babel/preset-env',{
      'targets':{
        'browsers':['last 2 versions']
      }
    }]
  ]
}

webpack热重载

热重载它是webpack的一个超级nice的插件，让你不必每次都去执行打包命令，装它：

yarn add webpack-dev-server -D

之后，咱们去webpack.config.js中配置：

devServer: {
    static:{
      directory: path.resolve(__dirname, './dist')
    },
    port:8080,  //端口
    hot: true, //主动打包
    host:'localhost',
    open:true //主动跳到浏览器
  }

此时还须要将package.json中的命令改改：

"dev": "webpack server --progress --config ./webpack.config.js"

咱们应用yarn dev再次运行，相熟的一幕来了！主动跳转到浏览器且将vue文件的内容展现在页面上，批改vue内容也会主动打包！

三、webpack打包原理

实现一个webpack的思路次要有三步：

读取入口文件内容（应用 fs ）剖析入口文件，递归的形式去读取模块所依赖的文件并且生成AST语法树        装置 @babel/parser 转AST树）            依据AST语法树，生成浏览器能够运行的代码（遍历AST树）                    装置 @babel/traverse 做依赖收集                        装置 @babel/core 和 @babel/preset-env 让es6转es5

咱们去新建一个目录，构造如下（其中 add.js 和 minus.js 定义了两个值相加减的函数并将其抛出，index.js中引入这两个函数并打印后果，代码就不附上了，比较简单）：

编辑

bundle.js 是咱们用来打造 webpack 的文件，代码如下：

const fs = require('fs');
const path = require('path');
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')

const getModuleInfo = (file) => {
//1 读文件
const body = fs.readFileSync(file, 'utf8'); //读到门路下的文件内容

  //2 剖析文件转AST树
  const ast = parser.parse(body, {   //body为须要解析的代码
    sourceType: 'module' //以es6的模块化语法解析
  })
  // console.log(ast.program.body);  //[{},{},{}...]

  //3 依赖收集
  const deps = {}
  traverse(ast, { //遍历ast
    ImportDeclaration({ node }) {  //把import类型的对象找进去
      const dirname = path.dirname(file)  //拿到index.js所在文件夹门路
      const abspath = './' + path.posix.join(dirname, node.source.value) //add.js文件的绝对路径
      deps[node.source.value] = abspath //key:'./add.js'  value:'xxx/add.js'
    }
  })

  //4.把ast->code
  const { code } = babel.transformFromAst(ast, null, {
    presets: ['@babel/preset-env']
  })
  console.log(code);

const moduleInfo = { file, deps, code }
return moduleInfo
}

//5. 递归获取所有依赖
const parseModules = (file) => {
  const entry = getModuleInfo(file)
  const temp = [entry]
  const depsGraph = {}

  for (let i = 0; i < temp.length; i++) {
    const deps = temp[i].deps //{ './add.js': './src/add.js', './minus.js': './src/minus.js' }
    if (deps) {
      for (const key in deps) {
        if (deps.hasOwnProperty(key)) {
          temp.push(getModuleInfo(deps[key]))
        }
      }
    }
  }

  temp.forEach(moduleInfo => {
    depsGraph[moduleInfo.file] = {
      deps: moduleInfo.deps,
      code: moduleInfo.code
    }
  })
  // console.log(temp);
  return depsGraph
}

//打包
const bundle = (file) => {
  const depsGraph = JSON.stringify(parseModules(file));
  //手写一个require 借助eval
  return `(function(grash) {

    function require(file) {
      function absRequire(relPath) {
        return require(grash[file].deps[relPath])
      }

var exports = {};

      (function(require, code) {
        eval(code)
      })(absRequire, grash[file].code)

return exports
}

require('${file}')

})(${depsGraph})`

}

const result=bundle('./src/index.js')
fs.mkdirSync('./dist')
fs.writeFileSync('./dist/bundle.js', result)

咱们应用node去运行这个文件，去到 html 页面上，发现控制台能输入加减法对应的后果，阐明打包胜利！

然而，webpack有一个毛病，如果在这个文件中须要改变一点点再保留，webpack的热重载又会从新主动打包一次，这对于大型项目是极不敌对的，这工夫预计等的花都要谢了。那么vite呈现了！

四、vite工作原理

咱们晓得，当申明一个 script 标签类型为 module 时，浏览器会对其外部的 import 援用发动 HTTP 申请获取模块内容。那么，vite 会劫持这些申请并进行相应解决。因为浏览器只会对用到的模块发送http申请，所以vite不必对我的项目中所有文件都打包，而是按需加载，大大减少了AST树的生成和代码转换，升高服务启动的工夫和我的项目复杂度的耦合，晋升了开发者的体验。

须要解决的问题

那么，要打包一个vue我的项目，它的入口文件是main.js，浏览器会遇到三个问题：

import { createApp } from 'vue' //浏览器无奈辨认vue门路
import App from './App.vue' //浏览器无奈解析.vue文件
import './index.css' //index.css不是一个非法的js文件，因为import只能引入js文件

const app = createApp(App)
app.mount('#app')

晓得怎么解决这几个问题，咱们就能打造一个vite了！

打造vite

咱们应用 koa 去搭建一个本地服务让其能够运行，新建一个 server.js 文件用来打造 vite ，代码如下：

//用node启一个服务
const Koa = require('koa');
const app = new Koa()
const fs = require('fs')
const path = require('path')
const compilerDom = require('@vue/compiler-dom') //引入vue源码能辨认template中的代码
const compilerSfc = require('@vue/compiler-sfc') // 能辨认script中的代码

function rewriteImport(content) {
  return content.replace(/ from '|"['|"]/g, (s0, s1) => {
    //若以 ./  ../  / 结尾的相对路径
    console.log(s0, s1);
    if (s1[0] !== '.' && s1[0] !== '/') {   //'vue
      return  from '/@modules/${s1}'   //去http://localhost:5173/@modules/vue
    } else {
      return s0
    }
  })
}

app.use((ctx) => {
  const { request: { url, query } } = ctx
  if (url === '/') {
    //读index.html
    ctx.type = 'text/html'  //设置类型
    let content = fs.readFileSync('./index.html', 'utf8')  //读文件
    // console.log(content);

    ctx.body = content//content输入给前端
  }
  else if (url.endsWith('.js')) {  //js文件  /src/main.js
    const p = path.resolve(__dirname, url.slice(1))  //   src/main.js  拿到文件的绝对路径
    ctx.type = 'application/javascript'
    const content = fs.readFileSync(p, 'utf8')
    ctx.body = rewriteImport(content)
  }
  else if (url.startsWith('/@modules')) { //  '/@modules/vue'
    const prefix = path.resolve(__dirname, 'node_modules', url.replace('/@modules/', ''))  // 'vue'
    const module = require(prefix + '/package.json').module //读取package.json中的module字段   拿到vue的模块源码地址
    const p = path.resolve(prefix, module)  // 拿到vue的模块源码的终极地址
    const ret = fs.readFileSync(p, 'utf8')  //读取文件
    ctx.type = 'application/javascript'
    ctx.body = rewriteImport(ret)  //递归避免vue源码又用到了其它模块
  }
  else if (url.indexOf('.vue') > -1) {
    const p = path.resolve(__dirname, url.split('?')[0].slice(1)) // src/App.vue
    const { descriptor } = compilerSfc.parse(fs.readFileSync(p, 'utf8'))

    console.log(descriptor);
    if (!query.type) { // 返回.vue文件的js局部
      ctx.type = 'application/javascript'
      ctx.body = `
        ${rewriteImport(descriptor.script.content.replace('export default ', 'const __script = '))}
        import { render as __render } from "${url}?type=template"
        __script.render = __render
        export default __script
      `
    } else if (query.type === 'template') { // 返回.vue文件的html局部
      const template = descriptor.template
      const render = compilerDom.compile(template.content, {mode: 'module'}).code
      ctx.type = 'application/javascript'
      ctx.body = rewriteImport(render)
    }

  }
  else if (url.endsWith('.css')) {
    const p = path.resolve(__dirname, url.slice(1))
    const file = fs.readFileSync(p, 'utf8')
    const content = `
      const css="${file.replace(/\n/g, '')}"
      let link=document.createElement('style')
      link.setAttribute('type','text/css')
      document.head.appendChild(link)
      link.innerHTML = css
      export default css
    `
    ctx.type = "application/javascript"
    ctx.body = content
  }
})

app.listen(5173, () => {
console.log('listening on port 5173');
})

vite热更新

那么，vite 的热更新怎么实现呢？

咱们能够应用chokidar库来监听某个文件夹的变更，只有监听到有文件变更，就用websocket告诉浏览器从新发一个申请，浏览器就会在代码每次变更之后立即从新申请这份资源。

（1）装置chokidar库：

yarn add chokidar -D

（2）之后去新建一个文件夹chokidar，在其中新建 handleHMRUpdate.js 用于实现监听：

const chokidar = require('chokidar');

export function watch() {
  const watcher = chokidar.watch('../src', {
    ignored: ['/node_modules/', '/.git/'],  //不监听哪些文件
    ignorePermissionErrors: true,
    disableGlobbing: true
  })
  return watcher
}

export function handleHMRupdate(opts) {   //创立websocket连贯客户端不给服务端发申请，服务端能够通过websocket来发数据
  const { file, ws } = opts
  const shortFile = getShortName(file, appRoot)
  const timestamp = Date.now()
  let updates;
  if (shortFile.endsWith('.css')) {  //css文件的热更新
    updates = [
      {
        type: 'js-update',
        timestamp,
        path: ${shortFile},
        acceptPath: ${shortFile}
      }
    ]
  }

  ws.send({
    type: 'update',
    updates
  })
}

文章转载于：zt_ever

https://juejin.cn/post/7267791228872671247

五、小结

webpack能够说是把所有模块的依赖关系打包成一个大文件，速度比较慢。

Vite 利用古代浏览器中原生 ES 模块的个性，将开发和构建过程拆分为更小的单位，通过浏览器运行时发送的http申请实现了来实现文件的按需加载。疾速的冷启动和实时的模块热更新。Vite 提供了更高效的开发体验和更快的开发环境速度。

vite开发环境应用 esbuild 做esm 转换，不做打包解决，生产用rollup作为打包工具。尽管vite也有一些小瑕疵（首屏，懒加载），不过和webpack相比体验感的确晋升了不少。

'" ↩