美文网首页
使用vue3 vite构建项目,优化性能,拆分包,减小主包js的

使用vue3 vite构建项目,优化性能,拆分包,减小主包js的

作者: 戚培俊 | 来源:发表于2023-06-20 17:13 被阅读0次

打包内存占用优化

配置build参数,设置打包占用内存,可以提升打包速度,优化内存占用
•package.json

"scripts": {
    ...
    "build": "node --max_old_space_size=4096 ./node_modules/vite/bin/vite.js build",
  },

build 优化

•vite.config.js

const dependencies = require('./package.json').dependencies;
export default defineConfig({
  ...
  // 打包配置
    build: {
        outDir: 'you-out-dir',
        assetsDir: 'static',
        brotliSize: false, // 设置为false将禁用构建的brotli压缩大小报告。可以稍微提高构建速度
        minify: true, // 开启压缩
        rollupOptions: {
            treeshake: true, // 开启 Tree Shaking,消除未使用的代码,减小最终的包大小
            output: {
                // 根据不同的js库 拆分包,减少index.js包体积
                manualChunks(id) {
                    if (id.includes('node_modules')) {
                        // 指定需要拆分的第三方库或模块
                        console.info('id', id)
                        const dependenciesKeys = Object.keys(dependencies);
                        const match = dependenciesKeys.find((item) => {
                            return id.includes(item);
                        });
                        console.info('match', match)
                        const notSplit = ['vue', 'ant-design-vue'];
                        if (match && !notSplit.includes(match)) {
                            return match;
                        }
                    }
                },
            },
            commonjsOptions: {
                requireReturnsDefault: 'namespace', // 要求ES模块返回其名称空
            }
        },
    },
})

优化前

image.png

优化后

image.png

相关文章

  • vue3的相关学习

    创建vue3项目 npm 6.x使用上面的命令通过vite(web开发构建工具)可以快速构建vue3项目,但个人觉...

  • 性能优化+打包构建

    性能优化 webpack-bundle-analyzerwebpack构建优化webpack分包webpack g...

  • 创建vue3项目

    一、 安装 Vite 二、使用Vite创建vue3项目 三、安装依赖,运行项目

  • VUE3(二)使用vue-cli创建一个项目

    VUE3官方推荐使用vite来构建项目,但是并不是说之前使用vue-cli创建项目就不行了。 使用vue-cli创...

  • 微信小程序——分包加载

    什么是分包? 在构建小程序的分包项目时候,构建会输出一个或者多个功能的分包。其中每个分包小程序必定会包含一个主包,...

  • 01-yarn整合vite2搭建vue3项目

    1 安装yarn并创建vue3项目 创建vite项目 运行项目 打开vite.config.js文件配置一下路径别...

  • vite + vue3 多页面实战优化续集:eslint+lin

    目的:项目投入使用发现很多使用起来不舒服的地方,进行优化 前提:在上一篇vite + vue3多页面配置记录ref...

  • vite events.js:291 throw er;

    在使用vite构建项目时,报错events.js:291 throw er;终端输入 node node_modu...

  • 性能优化

    减少请求数量 减小资源大小 优化网络连接 优化资源加载 减少重绘回流 使用性能更好的API 构建优化 减少请求数量...

  • Vue2老项目使用vite2升级

    Vue2老项目使用vite2升级 基础配置 安装npm包 新建vite.config.js 给index.html...

网友评论

      本文标题:使用vue3 vite构建项目,优化性能,拆分包,减小主包js的

      本文链接:https://www.haomeiwen.com/subject/ayoyydtx.html