打卡学习-打包工具（了解）

MINT
173 阅读4分钟

菜鸡打卡

1.你了解到前端有哪些项目构建工具?

webpack,vite,gulp,grunt，

2.webpack 和 gulp 在进行代码合并的时候还有什么不同?

webpack 是基于 commonjs 模块化规范进行代码合并, 而 gulp 只是简单的代码合并.

3.列举几个 gulp 中常用的插件?

  • 合并文件: gulp-concat;
  • 压缩 js: gulp-uglify;
  • 文件重命名: gulp-rename;
  • 压 缩 css: gulp-minify-css
  • 压缩 html: gulp-hmltmin
  • 启动开发服务器: gulp-connect
  • 拷贝文件: gulp-copy

4.webpack 有哪些常见的配置?

webpack.config.js:

const path = require('path')
const HtmlWebapckPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebapckPlugin({
    template: path.join(dirname, 'src/index.html'),
    filename: 'index.html'
});

module.exports = {
    // 打包模式, 可值:development(开发模式),production(生产模式) 
    mode: 'development',
    // 插件配置节点
    plugins: [
        // html-webpack-plugin 作用:根据模板,在内存中创建一个 html 页面
        htmlPlugin
    ],
    resolve: {
        // 配置省略的文件后缀
        extensions: ['.js', '.jsx', '.json'],
        // 配置根路径
        alias: { '@': path.join(dirname, './src') }
    },
    module: {
        // 配置 loader 
        rules: [
            {
                test: /\.js|jsx$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: '[name]-[local]-[hash:5]'
                            }
                        }
                    },
                    'sass-loader'
                ]
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                loader: 'url-loader', // 需 要 依 赖 file-loader 
                options: {
                    limit: 10000
                }
            }
        ]
    }
}

5.说说你对vite了解

  • 快速的冷启动
  • 即时的模块热更新
  • 真正的按需编译
  • Vite 天然支持引入 .ts 文件
  • ...

原理：利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去 webpack 冗长的> > 打包时间

6.扩展- vite的工作机制

image.png

由图也可以看到，vite实际上也是一个server，在启动vite构建web server（就是上面的localhost:3000）后，访问这个地址，该页面会向web server发送请求，请求对应的文件，可以从network中看到，如下

image.png

在请求这些资源后，这些资源并非是直接返回的，可以看看其中的App.vue，实际上可以看到，这里有两个App.vue，两个HelloWorld.vue，实际上这就是因为在请求这些文件的时候，被vite server拦截了，经过编译后才返回对应的内容

可以看看network中App.vue的内容

image.png

可以看到和项目中的App.vue其实是完全不同的

image.png

但仔细看的话会发现，在network中的App.vue，有一句

image.png

而实际上，这个工作机制也正是vite快的原因，在这里，由于视图只会请求到他使用到的文件，而vite只会拦截被请求到的文件，所以那些没有被引用到的文件就不会被编译，这就做到了按需编译

这里可以尝试修改main.js中的import的内容，不引入css文件

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

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

此时页面自动刷新，可以看看network的内容，发现没有请求index.css文件

image.png

但这样子，可能会提出一个问题，每次请求都拦截编译一次，不会造成多次重复的编译工作吗，这里可以仔细地看看图中，会发现，除了main.js和client，以及一个用来改变协议的websocket握手外，状态码都变成了304

image.png

304是什么？缓存啊，这样就意味着，当修改了页面的内容的时候，它只会重新编译其中发生了改变的文件，而其他文件通过缓存的方式，直接使用缓存资源，不需要进行额外的编译，这也是直接利用了浏览器的缓存机制

除了利用浏览器缓存外，vite本身也有一个缓存的机制，它会针对依赖的包做一个缓存，这里可以看一下network中main.js的response

image.png

可以发现，对vue的引用，变成了对@modules下的vue.js的引用，那么这个vue.js，是在哪里呢
回到项目的目录，找到node_modules下的.vite_opt_cache文件夹可以找到vue.js文件

image.png

而实际上，network中的vue.js文件，就是这个文件，这个是一个对vue进行编译后生成的js文件，如何证明最终请求到的是这个文件呢，其实也简单，直接在这个文件中添加一些代码

image.png

这里在第9行添加了一个注释，回到network中查看，可以发现，并没有发生任何改变，但实际上，这是因为这个文件的修改不会造成热更新，所以需要ctrl+R刷新一下

image.png

可以看到，果然出现了，实际上.vite_opt_cache就是用来存放被缓存的依赖包的，而这里不止缓存vue的依赖包，其他的依赖包也可以，比如这里引入一个axios

npm i axios -S

在main.js中简单加入一个axios请求（这里只是随便写个请求让axios能被用到）

import { createApp } from 'vue'
import App from './App.vue'
import axios from "axios"
// import './index.css'

axios.get("https://www.baidu.com")
createApp(App).mount('#app')

刷新根目录，可以看到，.vite_opt_cache下多了一个axios.js

image.png

vite就是通过这两种缓存，又一次提升了速度

等等，刚刚说了啥，websocket连接，怎么会有websocket连接，这个hello world页面好像没有什么websocket相关的东西啊，实际上，这是vite实现HMR的手段

vite通过使用websocket连接，当修改一个文件保存时，将这个修改的文件编译推送到浏览器，实现一个热更新.

那么到这里，基本了解完vite的使用和其整体的工作机制了.

avatar
文章
阅读
粉丝