携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情

编译优化

• 为什么vite开发环境脚本运行速度这么快，并且热更新几乎是无感的，让我们一起来看看
• vite 预编译之后，将文件缓存在 node_modules/.vite/ 文件夹下

CommonJs to ESM

• vite 预编译时，将非 esModule 的引入，编译成 esModule 文件
• 如果不预编译 CommonJs 模块，会报错,比如 react 采用的是 commonJs 模块
• 修改 vite.config.js

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    // 预编译哪些文件
    include: [],
    // 哪些文件不预编译
    exclude: ["react"],
  },
});

• 运行项目在浏览器查看

Uncaught SyntaxError: The requested module '/node_modules/react/index.js?v=da303a27' does not provide an export named 'useState'

把文件打包到一起

• 比如 lodash-es 库，分成很多个文件，如果不进行打包，会在网络中产生很多个请求
• 修改 vite.config.js

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    // 预编译哪些文件
    // include: [],
    // 哪些文件不预编译
    exclude: ["lodash-es"],
  },
});

• 引入一个函数

import { throttle } from "lodash-es";
console.log(throttle);

• 网络中加载了很多 loadsh-es 相关模块，造成浏览器卡顿

• 我们使用 vite 的缓存，会把 lodash-es 的模块打包到一个文件夹中

• 浏览器中只会加载一个文件，并且缓存第三方库

在非 Node 服务中集成

• 我们有可能会遇到比较老的前后端未分离的项目，这种项目中我们如何使用vite来提高我们的开发速度？
• 场景：老项目需要后端引擎将数据写入模版引擎

归档.zip 由于还是比较擅长 node ，所以还是起一个 node 服务

创建一个 node 服务

yarn add express 

server.js

const express = require("express");
const app = express();

app.set("view engine", "pug");

app.get("/", (req, res) => {
  res.render("index", {
    title: "标题",
    message: "hello node",
  });
});

app.listen(4000);

• /views/index.pug

html 
  head 
      title= title 
  body 
      h1= message
      div(id="app")
      script(src="http://localhost:3000/@vite/client" type="module")  // 引入前端服务文件
      script(src="http://localhost:3000/src/main.js" type="module")  // 引入前端服务文件

• 启动服务

node server.js

启动前端服务

访问前端服务

• 访问后端服务地址

• 此时 图片时无法显示出来的

• 正常如果需要做这种需求，一般会把我们前端代码，放到后端服务中，然后在后端服务中做静态资源映射，映射到前端目录下

打包前端项目引入到后端服务

打包前端

• 修改 vite.config.js

export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': '/src',
      '@styles': '/src/styles',
    },
  },
  server: {
    host: '0.0.0.0',
  },
  build: {
    manifest: true,
  },
})

• 打包的 dist 会多一个 manifest.json 文件

{
  "index.html": {
    "file": "assets/index.af984f6b.js",
    "src": "index.html",
    "isEntry": true,
    "imports": [
      "_vendor.534f743d.js"
    ],
    "css": [
      "assets/index.14ec4049.css"
    ],
    "assets": [
      "assets/logo.03d6d6da.png"
    ]
  },
  "_vendor.534f743d.js": {
    "file": "assets/vendor.534f743d.js"
  }
}

引入到后端

• 把打包项目拷贝到后端服务中*
• 修改node服务server.js

const express = require("express");
const app = express();

const mainfest = require("./dist/manifest.json");

app.set("view engine", "pug");

app.use(express.static("dist")); // 静态资源映射

app.get("/", (req, res) => {
  res.render("index", {
    title: "标题",
    message: "hello node",
    index: mainfest["index.html"].file,
    vendor: mainfest["index.html"].imports,
    css: mainfest["index.html"].css[0],
  });
});

app.listen(4000);

• 通过 manifest.json 文件，把前端资源引入模版中
• index.pug

html 
  head 
      title= title 
      link(href=css rel="stylesheet" type="text/css")
  body 
      h1= message
      div(id="app")
      script(src=vendor)
      script(src=index)