a8725585的博客

本文仅记录一下现有项目由webpack迁移到vite踩到的坑

和传统的dead code elimination（DCE）区别为传统DCE消除不可能执行的代码，tree-shaking更关注消除没有用到的代码。基于作用域，在AST时对韩素或全局对象进行对象记录，然后在形成的整个作用域链对象中进行匹配import的导入并标识起来，最后打包匹配的代码，删除未匹配的。通过ES Module的特性可以进行静态分析的特点，在编译时进行静态分析导入导出关系，识别出无用代码进行剔除。从入口文件出发，找出所有读取的变量，找这些变量在哪里定义的，将定义语句包含进来，无关代码抛弃。

博客地址webpack迁移至vite 文章目录步骤效果对比错误处理注意事项 步骤 根目录新增index.html 使用module引入入口文件 <script type="module" src="/src/index.tsx"></script> 安装依赖 yarn add -D vite @vitejs/plugin-legacy vite-plugin-importer @vitejs/plugin-react-refresh @rollup/plugin-babe

Git Hooks 就是那些在Git执行特定事件（如commit、push、receive等）后触发运行的脚本 Git Hooks功能作用 多人开发代码语法、规范强制统一 commit message 格式化、是否符合某种规范 如果有需要，测试用例的检测 服务器代码有新的更新的时候通知所有开发成员 代码提交后的项目自动打包travis ci（git receive之后） 等等 husky介绍 Git hooks made easy 让githooks使用起来简单的工具 实例：现在使.

webpack优化小结测量打包速度配置loaderDLL、Externals多进程使用缓存多进程代码压缩 测量打包速度 speed-measure-webpack-plugin插件 progress-bar-webpack-plugin插件 --report-json 命令参数 配置loader 优化搜索时间、缩小文件搜索范围、减少不必要的编译工作 DLL、Externals 原理都是减少第三方库的编译 多进程 thread-loader（v4以后的官方推荐） happypack（不怎么维护了

webpack运行在node.js上，所以模块化规范也同node.js 使用的是commonjs规范 commonjs规范内容 一个文件就是一个模块，模块间作用域互不影响 模块的定义 module.exports 模块的引用 require(‘标识符’) 模块标识符 服务端 commonjs规范为同步加载，适用于服务端，在浏览器中js加载会阻塞页面渲染，因此同步不适用 浏览器端 产生了amd（...

跨域 之前我们介绍了cookie的跨域访问。今天发现了另一个跨域的好方法反向代理。 介绍 浏览器对于JavaScript具有同源策略，服务器之间没限制，vue在调试时会自动启用一个本地服务，我们在调用跨域的接口时通过代理即可让本地的服务代理浏览器的请求接口，获取结果再返回给浏览器，这样就实现了跨域。 客户端(请求)-&amp;amp;gt;本地服务器-&amp;amp;gt;远程接口(响应)-&amp;amp;gt;本地服务器-&amp;amp;gt;客户...

问题现象： vue脚手架使用了HtmlWebpackPlugin插件打包index中的依赖，因此设置小图标的时候按原来的方法会出现问题 在页面源文件index.html的标签之间插入 &lt;link rel="shortcut icon" href=" /favicon.ico" /&gt; 仍然无法加载小图标 解决方法： HtmlWebpackPlugin插件中加入小图标 ...

1、fileSystem.statSync is not a function出现情景：使用babel进行es6转换时原因：webpack版本与babel-loader不匹配解决：使用相匹配的版本如果babel-loader &gt;= 7.0.0 那么webpack &gt;=2.2.0 如果webpack 1.x请用babel-loader 6.x 注意事项: npm i -D -g w...

公共库的处理原因上一节我们说到了vender.bundle.js这个公共库。在多页面应用里我们经常会有多个页面都需要引入相同的文件如bootstrap、jquery等，如果每次都将其打包进js里是不是就浪费流量，因为每次打开一个新页面都请求一次js，而公共部分的js我们完全可以放在同一个js文件里，在第一次请求时加载，后面页面用到同样的文件时是不是直接从缓存里拿来用就行了，这样页面加载的js部分是...

大致思路：多页应用就是多个页面分别引入资源（js、css）等 文件结构 |-- project |-- src |-- html |-- pageA.html |-- pageB.html |-- js |-- index.js |-- pageB.js |-- pageA.js |-- webpack.config.js 一、生成页面绑定js 在使用webpack打包...

一、使用babel编译es6语法引入css文件我们只需在入口文件里requirecss文件进来即可，当然也可以使用es6的import语法。这样的话我们得先安装es6转es5的加载器babel啦。具体步骤1.安装相关模块npm install --save-dev babel-core babel-loader babel-preset-env2.在webpack.config.js中添加load...