做烘焙网站,微博推广方式,企业建设网站个人总结,百度网盘下载官网基于 Rust 的高性能 Web 构建工具。rspack 主要适配 webpack 生态#xff0c;对于绝大多数 webpack 工具库都是支持的。
启动速度快#xff1b;增量热更新快。兼容 webpack 生态#xff1b;内置了 ts、jsx、css、css modules 等开箱即用。生产优化#xff0c;tree shaking…基于 Rust 的高性能 Web 构建工具。rspack 主要适配 webpack 生态对于绝大多数 webpack 工具库都是支持的。
启动速度快增量热更新快。兼容 webpack 生态内置了 ts、jsx、css、css modules 等开箱即用。生产优化tree shaking、代码压缩。
rspack-vue3 代码仓库
基本使用
创建项目rspack-vue3,安装rspack/cli
$ npm init -y
$ npm install -D rspack/cli通过rspack.config.js文件来配置编译打包项,在跟项目中创建文件rspack.config.js。entry编译入口指向src/index.js;output配置构建输出
const path require(path);module.exports {entry: {main: ./src/index.js,},output: {filename: main.js,path: path.resolve(__dirname, dist),},
};在src/index.js文件中定义渲染函数并调用。在package.json增加脚本执行命令build: rspack build
// 渲染函数
const render () {document.getElementById(app).innerHTML hello world;
};render();执行构建npm run build编译输出可以看到dist目录的输出。在 dist 目录中新建index.html引入编译文件
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title/headbodydiv idapp/div/bodyscript src./main.js/script
/html在浏览器中访问文件index.html可以看到正常展示。
在package.json增加脚本执行命令dev: rspack serve用于开发环境。rspack 内置了对 html 的支持就无须我们手动创建配置 index.html 了。
创建 html 模板文件public/index.html,配置rspack.config.js并指向 html 文件
const path require(path);module.exports {// ...builtins: {html: [{ template: path.resolve(__dirname, public/index.html) }],},
};再次执行构建可以看到自动在 dist 目录下生成了index.html 更新rspack/cli版本,修改了使用方式查看后面的章节说明 配置对vue3的支持
安装vue、 vue-loadervue-loader 版本必须17.2.2 npm i vue vue-loader修改配置rspack.config.js增加对 vue 单文件组件的解析
// plugins
const { VueLoaderPlugin } require(vue-loader);module.exports {//...plugins: [new VueLoaderPlugin()],module: {rules: [{test: /\.vue$/,loader: vue-loader,options: {experimentalInlineMatchResource: true,},},],},
};创建src/App.vue文件并修改src/index.js入口文件按照 vue 的使用方式引入组件、创建实例、挂载
import { createApp } from vue;import App from ./App.vue;// 创建实例
const app createApp(App);app.mount(#app);
// 渲染函数
// const render () {
// document.getElementById(app).innerHTML App;
// };// render();配置less-loader
rspack 内置 css 模块的编译对于 css 预处理器只需安装后配置好。
$ npm i less-loader修改配置增加对 less 的解析。调整App.vuestyle 样式嵌套书写 less 样式。
module.exports {// ...module: {rules: [// ...{test: /\.less$/,loader: less-loader,type: css,},],},
};如果不希望生成 css 文件将 css 样式内联到 js 中可以配置css-loader\vue-style-loader
$ npm i css-loader vue-style-loader -D修改配置,npm run build可以看到没有额外的 css 文件生成。这里面有一个type: javascript/auto配置它的作用是标记了资源的类型而 rspack 根据类型有内置的处理方式。
当使用了css-loader\vue-style-loader后就不需要原生的 css 支持关闭配置experiments.css:false。会发生冲突。
module.exports {// ...module: {rules: [// ...{test: /\.less$/,use: [vue-style-loader, css-loader, less-loader],type: javascript/auto,},],},experiments: {css: false,},
};支持JSX
酷爱使用的 jsx 必须要配置上由于 rspack 对预 webpack 插件的兼容大多数 webpack 的插件可用。
安装babel-loader \ babel/core \ vue/babel-plugin-jsx
$ npm i babel-loader babel/core vue/babel-plugin-jsx -D修改配置添加对 jsx 文件的解析。新建文件src/views/index.jsx创建 vue 组件然后引入到App.vue中使用渲染。
module.exports {// ...module: {rules: [// ...{test: /\.jsx$/,use: [{loader: babel-loader,options: {plugins: [vue/babel-plugin-jsx],},},],},],},
};组件文件代码可以查看仓库 其他配置项
安装其他依赖库vuex/vue-router/element-plus
$ npm i vuex vue-router element-plus dayjs axios element-plus这些都是 vue 的配套设施这里不再多写了每个项目里配置都差不多。 还有代码规范、提交规范等
$ npm i husky eslint eslint-plugin-vue eslint-config-prettier commitlint/cli commitlint/config-conventional -D配置好之后就可以创建项目去开发业务系统了。
全量导入element-plus样式时编译报错
因为之前在配置.vue文件样式时增加了配置 experiments: { css: false },关闭了默认的 css 样式处理需要手动增加 rules 配置来处理
安装style-loader,增加配置处理.css文件的处理。
{module: {rules: [{test: /\.css$/i,use: [style-loader, css-loader],},];}
}也可以使用vue-style-loader替代style-loader都是解决项目加载 css 样式的问题style-loader不局限 vue 项目功能更多一点。
resolve.alias 定义路径别名
配置 rspack.config.js,extensions配置解析的模块。
{resolve: {alias: {: path.resolve(__dirname, ./src),},extensions: [.js, .jsx, .vue,.mjs],},
}升级到了rspack0.5,需要单独安装rspack/core
将之前配置的builtins.html ,调整为内置的插件进行配置
const rspack require(rspack/core);// ...
{// builtins: {// html: [{ template: path.resolve(__dirname, public/index.html) }],// },plugins: [new VueLoaderPlugin(),new rspack.HtmlRspackPlugin({ template: public/index.html }),],
}最近已经发布了rspack0.6 更新速度还是可以的。对于 webpack 生态的兼容很适合旧项目的迁移升级。 rsbuild 基于 rspack 的构建工具
官方推荐的基于 rspack 的 web 构建工具。是 webpack 迁移到 rspack 的最佳方案。
易于配置提供开箱即用的构建能力。集成了 RspackSWC 和 Lightning CSS 等高性能工具。内置插件系统可以使用现有大多数的 webpack 插件和所有的 rspack 插件
npm create rsbuildlatest 按照提示
选择了vue3\typescript,暂时没有其他的选项
安装好依赖npm i,启动 安装rsbuild/plugin-babel rsbuild/plugin-vue-jsx 支持 vue jsx/tsx 语法
新增配置rsbuild.config.ts
import { defineConfig } from rsbuild/core;
import { pluginVue } from rsbuild/plugin-vue;
import { pluginBabel } from rsbuild/plugin-babel;
import { pluginVueJsx } from rsbuild/plugin-vue-jsx;export default defineConfig({plugins: [pluginBabel({include: /\.(?:jsx|tsx)$/,exclude: /[\\/]node_modules[\\/]/,}),pluginVueJsx(),pluginVue(),],
});安装vue配套设施vuex\vue-router\axios等。完善整个脚手架。详情查看仓库https://gitee.com/ngd_b/rspack-vue3/tree/rsbuild-vue3/
npx rsbuild inspect 查看默认的配置
包含两个文件rsbuild.config.mjs\rspack.config.web可以通过项目下的rsbuild.config.ts文件进行修改。
可通过--env production 选项来输出生成环境下的配置。
增加路径别名引文是 ts 项目所以优先在tsconfig.json中配置也可以在rsbuild.config.ts
{compilerOptions: {paths: {/*: [./src/*]}}
}内置了less\sass预处理器。重新配置了 html 模板新建pulbic目录创建index.html文件修改配置
{html:{template:./public/index.html},
}rsdoctor 构建分析工具
可以将编译行为及耗时可视化展示。只支持构建过程分析自定义构建扫描规则。
安装:
$ npm add rsdoctor/rspack-plugin -D增加配置rsbuild.config.ts
import { RsdoctorRspackPlugin } from rsdoctor/rspack-plugin;{tools:{rspack(config, { appendPlugins }) {// 仅在 RSDOCTOR 为 true 时注册插件因为插件会增加构建耗时if (process.env.RSDOCTOR) {appendPlugins(new RsdoctorRspackPlugin({// 插件选项}),);}},}
}RSDOCTOR在执行构建时增加变量开启构建分析。RSDOCTORtrue npm run build 最近在升级旧项目会写一篇记录文章编译打包速度至少提升了 60% 还在调整中。
