关于前端:亲身体验了一把vite感觉真的没有说的那么好很多坑

72次阅读

共计 2593 个字符,预计需要花费 7 分钟才能阅读完成。

1、有话要说

原本我的项目中用的是 webpack,我想着把我的项目构建成 vite,就能够晋升工作效率,然而谁知。各种各样的坑,所以我感觉还是简略的写下来

2、require

家喻户晓 require 是 webpack 中的语法。
如果你想动静申请一个动态资源门路,你能够这样

computed: {getUrl() {return require("@/assets/images/" + this.src);
    }
}

然而在 vite 中,不是,它不辨认 require,而是要应用 new URL()
在我的项目中坑的是 new URL 中居然不只是 @别名符,你只能用相对路径

 computed: {getUrl() {return new URL(`../../assets/images/${this.src}`, import.meta.url).href;
    }
},

因为一旦应用 @形式,在开发时失常,那么你编译后,就会报错。基本找不到门路。

2、process

process 也用不了,
比方你我的项目中用了
process.env.NODE_ENV
那么只能替换为
import.meta.env.MODE

3、webpack.ProvidePlugin

vite 中不反对 webpack 中提前注入的形式。

比方你我的项目中很多中央都要用

import moment from 'moment';
import _ from 'lodash';
import mathjs from 'mathjs';
import jquery from 'jquery';

你要在每个用到的组件中,都要引入。很烦很烦。
所以 webpack 就提供了一个插件 ProvidePlugin,能够让你提前就一次性注入,之后在页面中间接应用,无需再引入

然而,然而,这么重要的性能,vite 居然不反对。

4、webpackChunkName

无奈在路由中通过 webpackChunkName 进行代码宰割。

导致在路由中引入的组件,编译后,会全副散落在 static 下的 js 文件夹下。很多很多。

5、启动很慢

我看到这里,认为页面曾经秒开了。然而关上页面才发现。统一 loading 中,没有任何反馈

回过头再看控制台

居然是慢吞吞的加载依赖。

此时我发现,我的 node_modules 下多进去了一个.vite 文件夹

关上一看,吓我一跳。多进去了这么多文件夹

前几个大于 1000k 的文件,合起来有 30M 大。而整个.vite 文件夹,足足有 40M

而后,进去页面,关上浏览器 network

算了,不截图了,太多了,

269 个申请。。。。。。。。。

震惊

当我登录之后,切换路由,它又去加载了 172 个申请。这简直是 webpack 的 4 倍多


而 webpack 才 19 次,因为我通过 webpackChunkName 将这个路由的文件全放到 chunk-dataSource.js 这一个文件中了

6、编译

这是我 vite.config.js 配置

build: {
    target: 'modules',
    outDir: resolve(__dirname, `dist/${entryPath}`), // 绝对于 root 而言
    assetsDir: 'assets', // 绝对于 build.outDir 而言
    assetsInlineLimit: 4096,
    cssCodeSplit: true,
    minify: 'esbuild',
    sourcemap: false,
    rollupOptions: {
      input: {index: resolve(__dirname, 'index.html'),
      },
      output: {chunkFileNames: 'static/js/[name]-[hash].js',
        entryFileNames: 'static/js/[name].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
      },
    },
    // chunk 大小正告的限度
    chunkSizeWarningLimit: 500,
  },

因为我应用到了中国地图,所以把 geoJSON 放到本地了,后果它间接报错。编译不通过。
提醒内存溢出。

费了我好大劲才找进去是 geoJSON 导致的问题。

其次是代码宰割。

css 散落一地

js 也散落一地

本想通过 rollup 自带的 manualChunks 来手动宰割

build: {
    target: 'modules',
    outDir: resolve(__dirname, `dist/${entryPath}`), // 绝对于 root 而言
    assetsDir: 'assets', // 绝对于 build.outDir 而言
    assetsInlineLimit: 4096,
    cssCodeSplit: true,
    minify: 'esbuild',
    sourcemap: false,
    rollupOptions: {
      input: {index: resolve(__dirname, 'index.html'),
      },
      output: {chunkFileNames: 'static/js/[name]-[hash].js', //chunkFileNames 会采纳 rollup 外部主动宰割,能够应用 manualChunks 明确指定宰割。entryFileNames: 'static/js/[name].js',
        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
        manualChunks(id, { getModuleInfo}) {if (id.includes('node_modules')) {return 'vendor'; // 代码宰割为第三方包}
          if (id.includes('views/pre-login')) {return 'pre-login'; // 代码宰割为数据源}
          if (id.includes('views/home')) {return 'home'; // 代码宰割为数据源}
          if (id.includes('views/settings')) {return 'settings'; // 代码宰割为数据源}
        },
      },
    },
    // chunk 大小正告的限度
    chunkSizeWarningLimit: 500,
  },

没承想,编译完后,用 vite preview 预上线去预览页面,报错了

我开发环境好好地,一编译,M is not a function

这还怎么玩, 啥也不是,老老实实换回 webpack 吧

正文完
 0