配置mode为production:在Webpack的配置中,将mode设置为production模式。这会自动启用一系列的优化功能,包括摇树优化。 使用Webpack的TerserPlugin:TerserPlugin是一个用于压缩和混淆JavaScript代码的Webpack插件。它内置了摇树优化功能,并可以通过配置选项进行进一步的优化。确保在Webpack配置中使用TerserPlugin并进行正确的配置。
因为当前项目的react版本太低导致的,在vite.config文件中配置以下代码解决: importreactfrom'@vitejs/plugin-react'plugins:[react({jsxRuntime:'classic',//指定 React 的 JSX 运行时为`classic`模式。}),], 解析JSX代码有两种模式:classic模式和automatic模式,参考这边文章 classic模式是在React 16版本之前使用的...
WebPack 开启 GZIP 使用compression-webpack-plugin插件可以在构建过程中对文件进行 gzip 压缩,并生成对应的 .gz 文件。 安装: npm i compression-webpack-plugin -D 引入: // webpack.config.jsconstCompressionPlugin=require("compression-webpack-plugin")module.exports={plugins:[newCompressionPlugin({algorithm:...
在webpack 的配置文件中,需要显式声明 rule,为对应的模块配置对应的 loader。 // webpack.config.js{rules:[{test:/\.vue$/,loader:'vue-loader'},// 它会应用到普通的 `.js` 文件// 以及 `.vue` 文件中的 `` 块{test:/\.js$/,loader:'babel-loader'},// 它会应用到普通的 `.css` 文件//...
在webpack 的配置文件中,需要显式声明 rule,为对应的模块配置对应的 loader。 代码语言:javascript 复制 // webpack.config.js{rules:[{test:/\.vue$/,loader:'vue-loader'},// 它会应用到普通的 `.js` 文件// 以及 `.vue` 文件中的 `` 块{test:/\.js$/,loader:'babel-loader'},// 它会应用...
图：一个简单的Webpack配置文件 许多打包软件，比如 Parcel 和 Vite 也支持许多操作，包括上图中的大多数操作，但无需任何配置文件，并且大多数现代打包软件的配置语法都非常简单。例如 Create React App 完全可以自动管理，只不过灵活性非常差，随着应用开发的进行，很多情况下你不得不“弹出”配置文件（也就是说，...
图:一个简单的Webpack配置文件 许多打包软件,比如 Parcel 和 Vite 也支持许多操作,包括上图中的大多数操作,但无需任何配置文件,并且大多数现代打包软件的配置语法都非常简单。例如 Create React App 完全可以自动管理,只不过灵活性非常差,随着应用开发的进行,很多情况下你不得不“弹出”配置文件(也就是说,你需要删...
在没有任何优化情况下,包体积为6.7M,比webpack版包体积小了0.4M 部署之后,vite版lighthouse的性能得分59分 通过分析,发现是因为没有压缩,大文件太多,加载过慢导致的,所以接下来,我们进行压缩文件。 压缩配置 import viteCompression from 'vite-plugin-compression'// https://vitejs.dev/config/export default de...
之前 webpack 中的配置：resolve: { extensions: ['.ts', '.tsx', '.vue', '.js', '.jsx', '.json', '.css', '.scss'], alias: { '@': path.resolve(__dirname, '../src'), assets: path.resolve(__dirname, '../src/assets'), vue$: path.resolve(__dirname, '../...
提高项目性能:压缩文件、代码分割。 优化开发体验:热更新、跨域问题。 ... 构建工具减轻了我们的心智负担,让我们不用关心我们写的代码如何在浏览器运行,只需要关心代码怎么写就可以了。市面上主流的构建工具有 Webpack、Vite、esbuild、Rollup、Parcel,以及最近刚出的 turbopack ,但目前最流行的依然是Webpack和Vite...