博客
分类
标签
归档
友链
关于
博客
分类
标签
归档
友链
关于
Volantis
文档
帮助
示例
社区
博客
源码
按需加载 & 样式自动加载 —— babel-plugin-import
几乎完全转自 一篇文章搞定 babel-plugin-import 插件 ,可以理解为 读后 & 自己敲一遍 的笔记,建议直接读原文章 Background我们用 element-ui 或 antd 的时候,样式都支持全局引入和按需引入。按需引入需要安装一个 babel-plugin-import 的插件,将全局的写法变成按需引入的写法。其实也是用了AST语法树转换的原理,实现 12...
2020-06-27
Engineering
Engineering
阅读全文
AST详解
TODO:还有这篇 字节分享几乎完全转自 AST 团队分享 ,可以理解为 读后 & 自己敲一遍 的笔记 What & Why What: 抽象语法树(Abstract Syntax Tree,简称 AST)是源代码的抽象语法结构的树状表现形式 Why: webpack、eslint 等很多工具库的核心都是通过抽象语法树来实现对代码的检查、分析等操作 浏览器就是通过将 js 代...
2020-06-25
Engineering
Engineering
阅读全文
webpack小结
基本篇对webpack的看法webpack是一个模块打包工具。可以用webpack管理我们的模块依赖,并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件(图片、字体等),让开发过程更加高效。对于不同类型的资源,webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系,最后 生成了优化且合并后...
2019-10-01
Engineering
Engineering
阅读全文
Bundler源码编写
实现代码实现一个类似webpack的打包工具,代码如下: 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273const fs = require('fs...
2019-09-30
Engineering
Engineering
阅读全文
如何编写一个plugin
什么是pluginplugin能帮助我们在webpack打包生成文件的某个事件段帮我们做一些事,类似于Vue中的生命周期函数。例如html-webpack-plugin能帮我们在打包结束生成html文件,并把打包生成的脚本文件插入html中。 plugin的编写假如我们想写一个plugin,这个plguin能帮我们在打包生成文件之后再生成一个.txt文件,里面写我们的版权信息。实现代码如下:...
2019-09-29
Engineering
Engineering
阅读全文
如何编写一个loader
什么是loaderloader其实是一种打包方案,loader可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。 自己编写的loader的使用同普通loader一样,在webpack.config.js的module中写新的rule,还要在webpack.config.js新写一个配置项resolveLoader(代...
2019-09-28
Engineering
Engineering
阅读全文
提升webpack打包速度的方法
及时更新版本(node,npm等),新版本一般都会有提高打包效率的新特性 在尽可能少的模块上应用loader。可以优化文件搜索范围(即在rule中写include或exclude),eg. 可以不用编译node_modules中的代码,因为里面的都是编译过的 plugin尽可能精简并确保可靠,也尽可能少用 resolve参数合理配置import或require的时候可以不写文件后缀,而在r...
2019-09-27
Engineering
Engineering
阅读全文
webpack之Lazy Loading
应用场景懒加载就是将不关键的资源延后加载,是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开,然后在一些代码块中完成某些操作后,立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度,减轻了它的总体体积,因为某些代码块可能永远不会被加载。 实现对于图片来说,先设置图片标签的src属性为一张占位图,将真实的图片资源放入一个自定义属性中,当进入自定义...
2019-09-27
Engineering
Engineering
阅读全文
webpack之Code Splitting
应用场景当我们的业务逻辑很大的时候(index.js很大),我们打包生成的文件会很大:用户打开页面要一次性加载这个很大的文件,需要很长的加载时间;当文件有一点点修改,用户又要重新加载这个很大的文件,又需要很长加载时间。所以可以用code splitting(代码分割)把代码分离到不同的 bundle 中,可以实现按需加载或并行加载这些文件,优化加载时间。 实现借用SplitChunksPlu...
2019-09-26
Engineering
Engineering
阅读全文
webpack之Tree Shaking
应用场景我们打包的源文件中引用了某个模块的一部分的时候,打包的时候却会把整个模块都打包进去,会造成打包后文件体积过大。此时就可以用tree shaking仅把我们需要的那部分代码打包进去,而把模块中我们用不到的部分“shaking”掉。正式一点的说法就是:移除上下文中的未引用代码。 注意点由于webpack中的tree shaking是依赖于ES5中的静态结构特性,所以仅适用于模块是用ES ...
2019-09-26
Engineering
Engineering
阅读全文