一. 模块化方案

1.cjs(commonjs)

commonjs通过require和exports导入导出
可以运行在node环境中,不能直接再浏览器中使用
cjs 为动态加载，可直接 require 一个变量

2.AMD(Asynchronous Module Definition，即异步模块加载机制)

3.CMD和[UMD

CMD:与AMD一样解决异步问题
UMD:一直兼容CJS和AMD的方案

4.ESM()

在 Node 及 浏览器中均会支持。
esm为静态导入,可以在编译器进行Tree Shaking,减少js体积
目前浏览器与node中均支持esm

  • cjs的模块输出的是一个值的拷贝,esm的输出是值的引用
  • cjs模块是运行时加载,esm是编译时加载

esm执行步骤: 1.构建 2.实例化 3.运行
确定从哪里下载的模块文件 下载并将所有的文件解析为模块记录
将模块记录转换为一个模块实例,为所有的模块分配内存,依照导出导入语句把模块指向对应的内存地址
运行代码,将内存填充

vite快速的原因

1.ESM将压力放在浏览器上

2.esbuild+依赖预构建

预购建作用:

  • 将项目中的cjs转换为esm
  • 将许多包合并成为一个包,减少http请求压力

    ESbuild的作用:

    1. 使用 GO开发
    2. 多核并行
    3. 尽可能的服用一分AST
    4. 几乎没有使用第三方库
  1. bundler

预构建使用ESbuild

  1. transformer

编辑TSX/JSX
缺点:没有类型检查

  1. minifier

从terser变为esbuild来压缩代码体积

webpack

webpack Runtime分析

做了三件事:

  1. __webpack_modules__: 维护一个所有模块的数组 . 将入口模块解析为AST,进行dfs并构建出所有的模块
  2. __webpack_require__(moduleId):手动加载一个模块,对已经加载的模块进行缓存,对未加载的模块执行id定位到__webpack_modules__中的包裹函数,执行返回module.exports,并缓存
  3. __webpack_require_(0)运行入口模块 ```javascript const webpack_modules = [() => {}]; const webpack_require = (id) => { const module = { exports: {} }; const m = webpack_modulesid; return module.exports; };

webpack_require(0); ``` 言简意赅就是一个简单的记忆化搜索

webpack动态加载chunk

项目中vite基本配置

全局配置scss

vite打包优化

查看打包体积

npm i rollup-plugin-visualizer --save-dev再使用npm run build页面会出现一个stats.html

优化策略

cdn加速

将常用的库比如 axios vue-router 等替换成 cdn